# Media Queries Overview

When creating a website the website must look good on different screen sizes. This ensures that the user has a good experience irrespective of what device they are on. This can be achieved by using media queries in our CSS.

### **Media outputs**

Media queries can be used by using the `@media` keyword which can be used to target different outputs, not just device screens. For example, the `@media print` can be used to target print media i.e. when the website is being printed out.

```css
@media print {
    body {
        color: black;
        background-color: white;
    }
}
```

## Media default type

The default media type if you haven't specified any type is `all`. These two codes are the same.

```css
body {
    color: black;
    background-color: white;
}

@media all {
    body {
        color: black;
        background-color: white;
    }
}
```

## Media query conditions

Conditions can be added to the media type. These are called *media queries*. The CSS within the block is applied only if the condition is true. The conditions within the queries are called *media features*.

```css
@media (min-width: 720px) {
 body {
 margin-inline: 5rem;
 }
}

@media (max-width: 720px) {
 body {
 margin-inline: 2rem;
 }
}
```

`min-width: 720px` can be read as the viewport must be at least 720px for the condition to be true. Conversely `max-width: 720px` can be read as the viewport must be at most 720px for the condition to be true.

## Orientation

You can also change the style of the website based on the orientation of the screen i.e. whether it is in *portrait* or *landscape* orientation.

```css
@media (orientation: landscape) {
  p {
    column-count: 2;
  }
}

@media (orientation: portrait) {
  p {
    column-count: 1;
  }
}
```

The above code changes the number of columns in a paragraph to two when the device is in landscape orientation and the number of columns to one when the device is in portrait orientation.