xy.css

Liquid-grid designs are inherently flexible and responsive, but tend to break down for more extreme screen sizes, larger or smaller. As defined by the W3C, CSS3 media queries enable designers to deliver custom styles based on media features like width, height, and color. Using @media queries is similar to defining any other CSS selector:

@media only screen and (max-width: 480px) {

	header { color: red; }
	footer { color: blue; }

}

Powerful stuff. CSS3 actually expands upon CSS2 @media rules targeting various media types. The most widely used media types are all, screen, print, and handheld. Media types are queried in a variety of ways, either from within the stylesheet, or as a <link> attribute:

@import url("xy.css") screen;

@media print {
	header {}
	footer {}
}

<link rel="stylesheet" media="print, handheld" href="xy.css">

Expanding this functionality, CSS3 @media queries enable designers to deliver custom styles to specific media features, such as resolution, orientation, aspect-ratio, and more. As before, custom media queries are accomplished either in the stylesheet or via <link> element:

@import url(color.css) screen and (color);

@media (min-width: 500px) {
	header {}
	footer {}
}

<link rel="stylesheet" media="screen and (color)" href="xy.css">

These powerful media queries enable designers to customize user experience to fit the capabilities of the browsing device. And best of all, it’s all automatic for modern browsers. Just target any property and include the custom CSS styles. Visitors equipped with the selected features will enjoy the customized interface. For smaller devices, ultra-large screens, and everything in between, @media queries give you better control over your design.