媒体查询和适应现成的网站

Question

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

他们要求我缩小所有可能的东西以适应网站到14“但仍然可以看到，就像它出现更大的屏幕尺寸。有人可以帮我解决这个问题吗？不，iphone屏幕不是一个选项，只有不同的桌面屏幕，特别是小屏幕。

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

Answer 1

你可以：

• 更改当前的样式表，使其适用于较小的设备（14“ 小，所以这可能是一个不错的选择。）这是一种简单的获取方式摆脱滚动条。

• 编写一个仅适用于某些设备的单独样式表，并使用media queries定位您想要的设备（例如使用min-width，max-width表达式）。这意味着您可以根据需要调整较小设备的样式表，而不会冒更大设备破坏页面的风险。

PhoneGap是一个很好的例子，当您调整屏幕大小时，样式表会发生变化。

Answer 2

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

但你可以添加

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

等。满足您所需的所有尺寸。