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 ，希望您会得到想要的。