CSS Media Queries Basic Example
Example
@media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
The above media query specifies two conditions:
- The page must be viewed on a normal screen (not a printed page, projector, etc).
- The width of the user's view port must be at least 720 pixels.
If these conditions are met, the styles inside the media query will be active, and the background color of the page will be sky blue.
Media queries are applied dynamically. If on page load the conditions specified in the media query are met, the CSS will be applied, but will be immediately disabled should the conditions cease to be met. Conversely, if the conditions are initially not met, the CSS will not be applied until the specified conditions are met.
In our example, if the user's view port width is initially greater than 720 pixels, but the user shrinks the browser's width, the background color will cease to be sky blue as soon as the user has resized the view port to less than 720 pixels in width.
