CSS媒体查询在移动设备上无法正常工作

Question

我有一个图片库，我试图让移动设备友好。在最后一部分之前，我已经完成了所有工作;从肖像切换到风景。

在横向观看时看起来很棒，但是当切换到纵向时，景观规则仍在应用，并且会导致图像被裁剪。

CSS：

@media (max-width:700px) {
        .slideshow-image img { left:-33%; }
}


@media (max-width:960px) {      
    .slideshow-image img { left:0; }
}

如果我将!important添加到第一个规则，它总是会应用并覆盖第二个规则，所以它在纵向看起来很好，但不是横向。我不确定我错过了什么。我的所有其他媒体查询都运行得很好。

Answer 1

使用您编写的代码，最后一个值是浏览器将始终使用的值（分辨率高达960px）。

当有多个选择器匹配一个元素时，最后定义的值将是浏览器将考虑的值（显然，如果没有内联样式或＆＃34;重要！＆ ＃34;条款）。

如果要为大于700px且小于960px的分辨率创建特定规则，则应使用：

@media (min-width: 700px) and (max-width:960px)

希望这有帮助！