css - 超过 480 像素的图像未使用媒体查询调整大小

Question

我目前正在尝试针对所有屏幕尺寸优化页面上的主图像。出于某种原因，我无法在 480 像素后调整大小。查询中的代码是正确的。只是为了检查，我在平板电脑大小的查询中输入了完全相同的代码，并且我得到了正确的调整大小。当我将查询中屏幕尺寸的属性更改为 480px 时，我什么也得不到。

图像从 600 像素开始，然后首先调整到 400 像素。但是在那之后，它将不再调整大小。我希望它的宽度为 200 像素。

这是我在 CSS 中的内容 - 如您所见，它与上面针对平板电脑的查询几乎相同:

/* ---------------------------------------------------
    Small Desktop/Tablet (2x4 boxes) 
    --------------------------------------------------- */

@media only screen and (max-width: 959px), only screen and (max-device-width: 959px) {

#imageWrap{
height:400px;
width:400px;
}

    #imageWrap img{
height:400px;
width:400px;
}

}
}

/* ---------------------------------------------------
Smartphone (1x8 boxes)
--------------------------------------------------- */

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

#imageWrap{
height:200px;
width:200px;
}

#imageWrap img{
height:200px;
width:200px;
}
}

Answer 1

看起来您的第一个代码块中的 } 太多了，这可能会禁用第二个(CSS 验证器会拾取的东西)。