CSS媒体查询不适用

Question

我在我的主要css样式表中使用此媒体查询，但它似乎无法正常工作。

@media only screen and (max-device-width : 768px) {
    .small { display: block; }
    .big { display: none !important;}
}

在Web检查器中，它甚至不会显示为规则，但是当我查看源面板时，查询显然存在。所以我不确定问题是什么。我正在尝试定位宽度小于768px的设备。

如果重要的话，这就是我如何链接到样式表 <link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />

Answer 1

当您使用max-device-width时，它不会影响网络浏览器，您应该检查移动浏览器是否有效。

或者，如果您想查看网络浏览器，请改用max-width。

参见 Working Demo

CSS

@media only screen and (max-width : 768px) {
    .small { display: block; }
    .big { display: none;}
}