Chapter 4Understanding Media Queries
Media queries are the third pillar of responsive web design, and are an extension to HTML5 that allows features of a user’s display to determine the CSS delivered to the device, as defined by the CSS3 Module. A mobile device in portrait orientation with a viewport width of 320px can be detected and given different styles compared to a desktop device with a viewport width of 1024px. Conventionally, the different styling would normally be restricted to layout, backgrounds, and images; in essence, a completely new set of styles can be delivered.
As in media types, there are three ways to invoke
media-query-dependent styles. First of all, as stylesheets in the link element of HTML or XHTML:
<link rel="stylesheet" ...
Get Jump Start Responsive Web Design now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
