javascript - 媒体查询并适应现成的网站

Question

我现在必须调整我当前的网站以适应更小的桌面屏幕尺寸。它可以在所有屏幕上查看，只有较小的屏幕，如 14"，它会在左侧创建一个滚动条，并且不是必需的。

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

你能告诉我应该改变什么吗？

score 0 · Accepted Answer

您可以：

更改您当前的样式表，使其适用于较小的设备（14" 不是那么小，所以这可能是一个不错的选择）。这将是摆脱滚动条的简单方法。
编写仅适用于某些设备的单独样式表，并使用媒体查询来定位您想要的设备（例如使用min-width,max-width表达式）。这意味着您可以随心所欲地为较小的设备调整样式表，而不会冒险破坏较大设备的页面。

PhoneGap是一个很好的网站示例，它的样式表会随着您调整屏幕大小而改变。

score 0 · Accepted Answer

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

但是你可以添加

@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) {

等您需要的所有尺寸。

2 回答 2