How to detect the media query in use?

Question

How to detect which the media query is in use,like"

@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  ;
}
}

I just want a method to get the matched media query string,return "@media (max-width: 979px)" or "@media (max-width: 1200px)" in this case.

What if they both match? Anything that is (max-width: 979px) is necessarily also (max-width: 1200px). In particular the way you are ordering your rules means that the padding, text-align and font-size declarations in your first rule are completely redundant as they will never be used. — BoltClock, Jan 03 '15 at 07:11

score 0 · Answer 1 · edited May 23 '17 at 12:13

Check this JSFiddle. As pointed out in the comment, both styles will be applied, whereas the overlapping styles (for instance, font-size, text-align etc... that are common for both CSS styles) will be overwritten by the other (based on their ordering in the style sheet).

For simplification and demo, I have applied the styles to a tag and used the following HTML code,

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

Below is the style applied for the anchor tag based on your style. You can check this in your page using developer tools from browser (I have used FireBug)

JSFiddle

Note: If you are targeting devices based on their screen size, you should consider using the max-device-width instead. Refer this

How to detect the media query in use?

1 Answers1