Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.

Media queries can be used to check many things:

• width and height of the viewport

• width and height of the device

• Orientation

• Resolution

  Media types

  The possible types of media you can specify are:

  • all

  • print

  • screen

## How Min- and Max-Width Queries Work

How media queries function can be a bit confusing. Let’s take a look at the queries which are commonly used in email.

### Max-width

Here is an example of a max-width query.

```xml
@media only screen and (max-width: 600px)  {...}
```

What this query really means, is “If \[device width\] is less than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.

### Min-width

Here is an example of a min-width query.

```xml
@media only screen and (min-width: 600px)  {...}
```

What this query really means, is “If \[device width\] is greater than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S with a screen width of 320px, the media query *will not* trigger and the styles contained in { … } *will not* take effect.