CSS媒体查询不适用

Question

我在我的主 CSS 样式表中使用了这个媒体查询，但它似乎不起作用。

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

在网络检查器中，它甚至不会按规则显示，但是当我查看源面板时，查询显然就在那里。所以我不确定问题可能是什么。我正在尝试定位宽度小于 768 像素的设备。

这就是我如何链接到样式表，如果这很重要的话 <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;}
}