html - 缩小浏览器窗口时 CSS 媒体查询不起作用

Question

我已确保 CSS 文件未被缓存并且 ID/类名称正确。当我将浏览器缩小到该范围内的尺寸时，它不会应用 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，希望你会得到你想要的。