缩小浏览器窗口时CSS媒体查询无法正常工作

Question

我确保CSS文件没有缓存，并且id / class名称是正确的。当我将浏览器缩小到该范围内的大小时，它不会应用CSS。

这是CSS代码：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    #body2 .content
    {
        max-width: 690px;
    }

    #navWaypoint #header
    {
        width: 690px;
    }
}

之前我没有遇到过这个问题。

Answer 1

如果您缩小浏览器窗口以评估您的代码，这是您的答案。

min-device-width和max-device-width指的是显示分辨率 虽然min-width和max-width是指浏览器窗口的大小。

使用min-width和max-width代替min-device-width和max-device-width，希望您能得到您想要的内容。