媒体查询和调整现成的网站

media queries and to adapt the ready made site

本文关键字：网站 调整 查询 媒体      更新时间：2023-09-26

我现在不得不调整我当前的网站，使其适应较小的桌面屏幕大小。它可以在所有屏幕上查看，只有像14英寸这样的较小屏幕，它在左侧创建了一个滚动条，这是不需要的

他们要求我缩小所有可能的尺寸，将网站缩小到14英寸，但仍然可以查看，就像屏幕尺寸更大时一样。有人可以帮我处理这个问题吗？不，iphone屏幕不是一个选项，只有不同的桌面屏幕，尤其是小屏幕。

你能告诉我该换什么吗？

您可以：

  • 改变你当前的样式表，使其在较小的设备上工作（14"不是那么小，所以这可能是一个很好的选择）。这将是一个简单的方法来消除滚动条。

  • 编写一个仅适用于特定设备的单独样式表，并使用媒体查询来定位所需的设备（例如使用min-width、max-width表达式）。这意味着您可以随心所欲地为较小的设备调整样式表，而不会冒着为较大的设备破坏页面的风险。

PhoneGap是一个很好的例子，说明网站的样式表在调整屏幕大小时会发生变化。

由于您已经编写了样式表和网站，因此很难从头开始。

但是你可以添加

@media screen and (min-width: ###px) and (max-width: ###px) {
    .sample { /*stuff here */ }
    body { /* stuff here */ }
}

到样式表的底部。

您可以将上面的###更改为所需的最小和最大宽度。所以你可以像一样

@media screen and (min-width: 768px) and (max-width: 959px) {

和

@media screen and (min-width: 479px) and (max-width: 767px) {

等等。适合你需要的所有尺码。

相关文章：