Question

如何检测正在使用的媒体查询，例如＆＃34;

@media (max-width: 979px) {
.menubar ul li a {
    border: 1px solid transparent;
    color:rgb(148,168,148)  ;
    display: block;
    margin: 0;
    padding: 3px 13px;
    position: relative;
    text-align: center;
    z-index: 400;
    font-size:14px;
}
}

@media (max-width: 1200px) {
.menubar ul li a {
    padding: 10px 15px;
    text-align: left;
    font-size:19px  ;
}
}

我只想要一个方法来获取匹配的媒体查询字符串，返回＆＃34; @media（max-width：979px）＆＃34;或＆＃34; @media（最大宽度：1200px）＆＃34;在这种情况下。

Answer 1

检查JSFiddle。正如评论中指出的那样，两种样式都将被应用，而重叠样式（例如，字体大小，文本对齐等......两种CSS样式都很常见）将被另一种样式覆盖（基于它们的在样式表中订购。）

为了简化和演示，我已将样式应用于a标记并使用以下HTML代码，

<a href="google.com">Test link</a>

以下是根据您的风格应用于anchor标记的样式。您可以使用浏览器中的开发人员工具（我使用过FireBug）在您的页面中查看此内容

JSFiddle

注意：如果您根据屏幕尺寸定位设备，则应考虑使用max-device-width。请参阅this

如何检测正在使用的媒体查询？

1 个答案: