CSS媒体查询未应用

Question

CSS媒体查询未应用

3

我在主 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" />

- Matt Roelle

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Surjith S M · Accepted Answer

由于您正在使用max-device-width，它不会影响Web浏览器，您应该在移动浏览器上检查它是否工作。

或者如果您想在Web浏览器上进行检查，则改用max-width即可。

请参见演示

CSS

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