Stacking Media Queries with CSS3

综合技术 2018-03-13

I'm trying to stack media queries in CSS, and can't seem to get it to work correctly. What i'm trying to achieve is having a single set of css rules for any
of the media queries. I know normally I could use an and
to have it apply to different rules, but in this case I'm trying to deal with vendor-specific prefixes so the browser won't satisfy all of the conditions.

Here's what I've got so far:

@media only screen and (min--moz-device-pixel-ratio: 2),
@media only screen and (-o-min-device-pixel-ratio: 2/1),
@media only screen and (-webkit-min-device-pixel-ratio: 2),
@media only screen and (min-device-pixel-ratio: 2) {
    /* My rules go here */
}

What is the correct way to stack rules like this? Also, if there is any further reading on this subject, I'd like to check it out.

Problem courtesy of: Dan

Solution

The correct way is to have only one @media
at the very beginning, followed by a comma-separated list of media queries:

@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    /* Your rules go here */
}

@media
is only permitted when declaring a distinct
media rule, and is not used to separate multiple media queries in a single rule.

Solution courtesy of: BoltClock

您可能感兴趣的

What’s with border-left-image, border-right-... So, I'm one of those guys that prides himself on always using the most recent browser versions (except Internet Explorer of course - I don't sp...
CSS3 scale() causes divs to become pixelated I've noticed that when animating CSS3 scale() it seems to pixelate every element it's used on. Example: http://jsfiddle.net/PD7Vh/2/ In the a...
20个非常绚丽的HTML5/CSS3应用插件 基于HTML5的应用现在已经非常广泛,今天我们就来向大家分享20款非常绚丽的HTML5/CSS3应用插件。希望大家喜欢并分享给你的好友们。 1、 HTML5视频破碎重组特效 强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给...
Why don’t CSS3 animations work on outline wi... I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an out...
Replace jQuery slide with animate() CSS3 I have jQuery slideUp and down and on a page and the performance of animations is very bad. So i want to replace the sliding function with .animate()...