css - 如何根据设备宽度有条件地应用视口(viewport)宽度？

Question

目前，我为我的移动用户将视口(viewport)宽度设置为设备宽度。在某些页面上，我需要拉伸(stretch)视口(viewport)宽度以适应漫画或外部对话框等内容，因此我应用了一个视口(viewport)宽度，比方说，480 像素。

一切都很好，直到我在我的 Iconia B1 平板电脑 (1024x600) 上进行了测试。视口(viewport)宽度限制为 480 会产生布局无法覆盖 100% 屏幕的问题。

百万美元的问题是:如果设备宽度小于 480，如何仅应用 480px 宽度？并且如果大于 480，则改为应用设备宽度(以使布局覆盖 100% 的屏幕)。有任何想法吗？有可能吗？

Answer 1

10 美元回答您的问题。

可以使用CSS3的媒体查询获取屏幕宽度，然后改变样式。您可以将其用作

@media only screen and (max-width: 480px) {
  // properties for smaller screens
}

// other styles if screen is bigger

好东西，你想问多少就问多少。然后都附加到 CSS 文件 (.css) 的末尾。您可以使用它们动态更改样式，而无需使用 JS。它们可用且易于操作。

@media only screen and (max-width: 480px) {
   // properties
}

@media only screen and (max-width: 600px) {
   // properties
}

而你只需要编辑需要改变的部分，其他属性都是一样的!