Question

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

图像从600px开始，然后首先将精细调整为400px。但在此之后，它将不再调整大小。我希望它宽200px。

以下是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验证器会选择它）。

使用超过480px的媒体查询不会调整图像大小

1 个答案: