缩小浏览器窗口时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 希望你会得到你想要的东西.