Wed, 2013-07-03 11:24
I tried searching for better explanation about CSS media rules, but could not find one.
So I took the efforts of writing them.
1. just '@media min width' (media or browser port width is greater than or equal to)
Eg.
@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.
2. just '@media max width' (media or browser port width is smaller than or equal to)
Eg.
@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.
3. '@media min width in conjunction with max width'
Eg.
@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'm sure there are more complex scenarios, if you wish to list them, write a better description for the same & of above?
Thu, 2013-07-04 01:24
#1
Hi surajnaikin, Nice
Hi surajnaikin,
Nice explanation.
See also: media query test page and @media property