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它不会影响Web浏览器，您应该检查移动浏览器以查看其是否正常工作。

或者，如果要检查Web浏览器，则只使用max-width 。

请参阅工作演示

CSS

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