Scratching the Surface: Media Queries Explained

Scratching the Surface: Media Queries Explained.

A media query is a CSS3 construct that allows developers to target styles at a specific set of devices.

The general form of a media query consists of a media type followed by one or more expressions that check for the desired media features. For example, the following media query will only apply its styles when the media type is “screen” and the width of the screen is equal to or greater than 320 pixels:

@media screen and (min-width: 320px) { /* Styles */ }

Media types

The media type is the first part of a media query. It is typically one of the following:

all: matches all media types 
screen: matches devices with a screen (such as computers, tablets, and phones) 
print: matches devices intended for printing

Media features

After the media type, you can specify one or more media features. These are the most common media features:

width: the width of the device 
height: the height of the device 
device-width: the width of the screen 
device-height: the height of the screen 
orientation: the orientation of the device (portrait or landscape)

You can also use media queries to target specific features such as color or monochrome screens, resolution, and more.