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

Question

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

一切都很棒，直到我在 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
}

只需编辑需要更改的部分即可，其他属性相同!