HTML and CSS Reference
In-Depth Information
MEDIA
QUERIES
The Media Blitz example is looking good now, but it is still not great. When you
resize the screen less than 1024px in width, the
<h1>
wraps onto two lines, and
the media elements start to look tiny and insignificant. This is unacceptable given
that they are supposed to be the main content of the site!
Wo u if d n' it if it b e g re at if if yo u h a d a m e c h a n if s m it of d y n a m if c a if if y a if it e r it h e if ay of u it of if
your site based on features such as width and height?
Well, l l , h e re 's t h e g o o d n e ws : T h e Me d i a Q u e r i e s s p e c (
w w w.w 3 . o r g / T R /
css3-mediaqueries)
allows you to do just that! In a nutshell, it extends the func-
tionality of CSS3 media types, which allow you to apply styles to markup based
on whether it is onscreen, being printed, and so on:
@media print {
/* print styles go here */
}
<link rel=”stylesheet” media=”print” href=”print.css”>
Media queries go even further, allowing you to apply styles based on media
types plus the result of tests on the condition of media features, such as browser
viewport width, screen orientation, resolution, and more. Here is a simple example:
@media screen and (max-width: 800px) {
/* put your styles here */
}
This code block specifies the following:
For the screen media type only, if the
width of the browser window is 800 pixels or less, apply the styles within the block.
If these conditions aren't true, completely ignore the rules within the block.
Yo u c a n
immediately see how powerful this feature is. It means that you can start applying
different styles to your site depending on features like screen width, so you can
provide one layout for a wide viewport, one for a narrow viewport, and as many
more as you like!
