CSS3 media queries explained

css media queries illustration

CSS Media queries explained

This topics is intended for the Web Developers using Advanced CSS3 Techniques. I tried searching for better explanation about CSS media queries, but could not find one better. So here is some very basic explanation to start with.


just ‘@media min width’ (media or browser port width is greater than or equal to)
E.g.

1
2
3
@media (min-width: 768px) {
body {background:orange}
}

CSS rules mentioned in this rule-set applies when the browser port width is greater than or equal to the one mentioned width within the rule, otherwise it will apply all other rules mentioned outside this rule-set.

just ‘@media max width’ (media or browser port width is smaller than or equal to)
E.g.

1
2
3
@media (max-width: 979px) {
body {background:blue}
}

CSS rules mentioned in this rule-set applies when the browser port width is smaller than or equal to the one mentioned width within the rule, otherwise it will apply all other rules mentioned outside this rule-set.

‘@media max width in conjunction with min width’
E.g.

1
2
3
@media (min-width: 768px) and (max-width: 979px) {
body {background:red}
}

CSS rules mentioned in this rule-set applies when the browser port width is within min & max width rule-set, but with conditions. If the browser port is smaller than the min or greater than the max width rule-set, it will apply all other rules mentioned outside this rule-set.

I put across a Media queries test page.

Get up to 5 new .COMs, $5.99 per year for the 1st year!

Leave a Reply