Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Writing Media Queries 451

16

You can also add it to the tag when you link an external style sheet:

You can add media query expressions to existing style sheets with the @media attribute:

@media all { ... }

Media Features

Media features are what make media queries interesting. There are 13 media features you
can test for:

n aspect-ratio—A ratio of the width of the device to the height.

n color—The number of bits per color component.

n color-index—The number of colors in the device’s color input title.

n device-aspect-ratio—The ratio of the device width to the device height.

n device-height—The height of the rendering surface.

n device-width—The width of the rendering surface.

n grid—If the device is a grid (such as TTY devices or phones with only one font)

or bitmap.

n height—The height of the display area.

n monochrome—The number of bits per pixel in monochrome devices. If the device

isn’t monochrome, the value will be 0.

n orientation—Whether the device is in portrait or landscape mode.

n resolution—The pixel density of the device; in print, this would be the dots per

inch or dpi of the printer.

n scan—The scanning process of TV output devices; for example, progressive

scanning.

n width—The width of the display area.

Along with these features, there are two prefixes you can add to them: min- and max-.
For example, to set a style sheet for all devices with at least a width of 320 pixels:

@media (min-width: 320px) { ... }

And to style devices that are narrower than 1024 pixels:

@media (max-width: 1024px) { ... }