CSS queries (mobile, tablet and screens)
I am trying to make a transition to a responsive developer (instead of a fixed one). Lately I've been trying to understand media queries and a little confusion. The test is simple:
I want to change the background color of the body to red for mobile, yellow for tablets, green for wide screens. The following code demonstrates this (for the most part). The problem I'm running into is when the width drops below 480px (30ms), the background reverts to the default css
(background turns red to white). Now .., my little mind tells me, "Oh, I'll just do
@media only screen and (min-width:1em) { body { background:red;} }
... this will fix the problem! "
This, however, seems wrong and unintuitive. Does anyone know the correct way to achieve this simple task?
/*
==========================================================================
MOBILE (min-width 480px)
========================================================================== */
@media only screen and (min-width: 30em) {
body { background:red; font-size:.75em; }
}
/*
==========================================================================
TABLETS (min-width 768px)
========================================================================== */
@media only screen and (min-width: 48em) {
body { background:yellow; font-size:.85em; }
}
/*
==========================================================================
SCREENS (min-width 1140px)
========================================================================== */
@media only screen and (min-width: 71.25em) {
body { background:green; font-size:1em; }
}
source to share
If I were you, I would put all the CSS back in max-width
. Something like max-width: XX
- it's a smartphone max-width: YY
- it's a tablet, otherwise it's a screen. So it will look something like this:
body { background:green; font-size:1em; }
@media only screen and (max-width: 71.25em) {
body { background:yellow; font-size:.85em; }
}
@media only screen and (max-width: 48em) {
body { background:red; font-size:.75em; }
}
source to share