如何根据设备宽度有条件地应用视口宽度？

Question

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

在我的Iconia B1平板电脑（1024x600）上进行测试之前，一切都很棒。视口宽度限制为480会导致布局问题不能覆盖100％的屏幕。

百万美元的问题是：如果设备宽度低于480，如何应用480px宽度 ？并且如果大于480，则应用设备宽度（使布局覆盖100％的屏幕）。有任何想法吗？它甚至可能吗？

Answer 1

您可以使用以下内容：

@media (max-width:480px) {
.myclass {
// your code here
}
}

.myclass {
// your code here
}

编辑：在上面的代码中，您可以在.media媒体查询中将.myclass设置为width：480px，对另一个使用宽度：100％。

Answer 2

回答你问题的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
}

您只需要编辑需要更改的部件，其他属性将是相同的！