1 reply [Last post]
surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi surajnaikin, Nice

Hi surajnaikin,
Nice explanation.

See also: media query test page and @media property