AtoZ CSS Screencast: Media Queries

The @media rule allows conditional styling of elements.

The conditions can be based on the type of media or known characteristics of the device being used.

Combining media queries with fluid layout and flexible images, allows us to implement responsive web design.

In this episode we’ll look at how @media queries can be used to change the styling of websites based on querying information about the device and two approaches for tackling page layout in responsive design.

Media Queries

Sometimes we only want certain styles to apply to certain types of devices or when certain characteristics of the device are true.

For example, we might want to remove the header and footer when printing a web page.

Using the query print will restrict the styles of the at-rule to the print media type.

[code language="css"]
@media print {
.site-header, .site-footer { display:none; }
}
[/code]

Other media types include

• all
• braille
• embossed
• handheld
• projection
• screen
• speech
• tty
• tv

The only two media types I use are print and screen, which is a bit of a catch-all for any screen-based device including mobile devices, tv and projection.

Continue reading %AtoZ CSS Screencast: Media Queries%

by Guy Routledge via SitePoint