0

我使用@media 查询构建了一个很好的模板，它有四种不同的布局：

850+px 宽度
<850px 宽度
iphone 横向
iphone 纵向

它的效果很棒，直到您将监视器窗口缩小到 480 像素以下（iphone 横向），然后它开始接收较小尺寸的 @media 查询。

有没有办法避免这种情况？

4

1 回答 1

1

我个人觉得最好在较小的浏览器窗口大小上显示“iPhone”布局，因为您的内容可能已经针对该布局进行了优化，但是，如果您真的想防止这种情况，您可以在声明中使用该device-width属性。@media类似的东西@media only screen and (max-device-width: 720px) { ... }将针对设备宽度而不是视口宽度。比较这个（视口宽度）与这个（设备宽度）的行为。使用这些值（更改min为max、更改像素大小等）并观察行为。另外，不要忘记您可以组合@media规则，例如@media (min-width: 400px) and (max-width: 600px) { ... }. 看看什么对你有用。

这种方法的问题是移动设备有各种形状和大小，因此您可能会在您没有计划的不同移动设备（我们只是说 Android 手机......）上提供不受欢迎的样式。但是，根据您的需要，这对您来说可能无关紧要。

如果您决定走这条路，这里有一个示例媒体查询和大小的列表来指导您：（http://css-tricks.com/snippets/css/media-queries-for-standard-devices/抱歉没有工作链接；显然我在 StackOverflow 上还不够酷，无法发布多个链接）.. .

于 2012-08-29T18:57:32.757 回答