The CSS3 implementation put in place a new feature specially designed to work with "Responsive Web Design", the "Media Query".

Media query makes a webpage adapt its layout to different screen sizes and media types.

Nowadays, CSS Media Queries are one of the most important parts of the Responsive Design.

Targeting different media types and a variety of conditions, also called as "breakpoints", if the specified condition and/or media types meet, the CSS rules inside the media query will be executed, otherwise, they won’t.

The Media Query syntax is as follows:

@media media type and (condition: breakpoint) { // CSS rules }

The Media Query is initialized as follows:

@media () { // CSS rules }

A Media Query is must called with a "@media" rule and, at least one condition being specified between the parenthesis.

All the conditions/breakpoints must be set inside the parenthesis

For example, to apply a larger font size for small devices, the condition set would have to check the maximum width of the device:

@media (max-width: 480px) { .text { font-size: 16px; } }

The code above will set the font-size to 16px when the device has a maximum width of 480px or less.

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type is implied.

all

Suitable for all devices.

@media (max-width: 480px) {.text {font-size: 16px;}}

print

Intended for paged material and documents viewed on a screen in print preview mode.

@media print {body { font-size: 10pt; }}

screen

Intended primarily for screens.

@media screen {body { font-size: 13px; }}

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and

Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true. It is also used for joining media features with media types.

not

Used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

only

Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

, (comma)

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

@media screen, print { body { line-height: 1.2; } }

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } }

A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries.

@media (max-width: 480px) { .text { font-size: 16px; } }

There is not a standard resolution for devices due to a ton of devices on the market, therefore, there is not also standard breakpoints. Having said that, there are some commonly used breakpoints in daily programming, which are:

@media

Media Queries Level 4 (Media Queries 4)
# media-descriptor-table

CSS Conditional Rules Module Level 3 (CSS Conditional 3)
# at-media

Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes