CSS: Media Queries
Tags: css, design
Published: 2020-09-09 02:11:21

**This blog serves as a simplification of what Responsive Web Design is and how to use Media Queries in CSS.**

There is a Space Themed CodePen at the bottom of the blog that covers the basics of media queries. [Jump to CodePen](https://dev.to/ethanmgustafson/css-media-queries-2co#hit-edit-on-codepen-to-follow-along).

## Responsive Design & Fluid Layout

### What is Responsive Design?

It is an approach to web design when creating layouts that can respond to the device being used to view content.

The term "[Responsive Design](https://alistapart.com/article/responsive-web-design/)" was named by Ethan Marcotte in 2010 to describe three techniques used together:

1. Flexible Grids
2. Flexible Images
3. Media Queries

#### Flexible Grids

Before Flexbox or Grid, you would either create a liquid or fixed layout for web pages. Both layouts are problematic, however, since they only are their correct size on the screen of the person who designed the web page.

Liquid layouts would stretch to fill the browser, but when they shrunk, the design would appear squished, with really long or thin text lines, making them incredibly difficult to read.

Fixed layouts would happen to give a horizontal scroll bar to screens of devices smaller than the site width.

#### Flexible Images

In order to make an image flexible, all you would have to do is set its `max-width` to `100%`, which means that it would take up 100% of its container, but never grow larger. It would resize when the browser resizes and adjusts based on the length of its container.

#### Media Queries

Media Queries allow you to change the layout of your CSS based on the screen size. They allow you to set conditions when a layout should be changed to adjust to the right size of the user's screen.

Before Responsive Design, JavaScript could be used in order to detect the correct screen size to load the correct CSS to.

##### Float

Developers needed a way to create layouts where they wouldn't have to adjust the screen size manually for every single device screen size. 

Flexible grids were used so that this manual adjustment wouldn't need to happen. Grids would adjust themselves. When using a Flexible grid, you wouldn't need to set a breakpoint until the content would begin to look bad.

Float was able to create flexible grids by giving each floated element a percentage width. The total of the percentages of the floated elements would be set so that they wouldn't exceed beyond 100%.

Ethan Marcotte used a formula that would be able to correctly calculate what the width of elements would be, by dividing pixels.

If a container was set to a `width` of `500px`, we would need a way to ensure that the inner column elements would not exceed the container width. The formula would be to divide the inner columns pixels by the parent columns pixels. 

Say we had a column element of `100px`. `100px / 500px = 0.2`, so we would move the decimal to places to the right setting the `width` of the column to be `20%`.

##### Flexbox and Grid

CSS Flexbox and Grid are Responsive by default. 

Flexbox's default behavior is to shrink & distribute space between `flex-items` depending on the size of their container, the `flex-container`.

CSS Grid implemented a new unit called `fr`. The unit would distribute available space between grid tracks. `fr` is a fraction of the space in the available container.

### The viewport `meta` tag

Responsive HTML pages will usually have a `meta` tag in the head of the document.

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

The [`meta`](https://www.w3schools.com/tags/tag_meta.asp) tag stands for **metadata**. What is metadata? Metadata is "a set of data that describes and gives information about other data." 

Metadata **always** goes in the head of an HTML document. They can be used to define character sets, page description, keywords, author of the document and viewport settings. None of the information inside of `meta` tags is displayed to the user.

In the above example, the attribute `name` is used to define the viewport. The **[viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)** is the area of a user's device screen that is visible.

The `content` attribute in conjunction with viewport allows the developer to control the viewport and set the dimensions and scaling of the web page.

`content="width=device-width, initial-scale=1.0"`

The first part of the content attribute is setting the width of the web page to be the screen-width size of the user's device. The `initial-scale=1.0` is setting the initial zoom level for the page when it is loaded by the browser.

## Using Media Queries

Media queries use an *optional* media type and any amount of *media feature expressions*. You can combine multiple queries using logical operators.

A Media Query will compute to `true` when a media type (if a media type is specified) matches with the device on which the document is viewed on **AND** *all* of the media feature expressions compute as true. Media Queries are case-insensitive. Queries with unknown media types always compute to `false`.

[Media Types](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features): 

- `all`
- `print`
- `screen`
- `speech`

We will be using the `screen` media type. When you don't define any media types the Media Query will default to `all`.

### Syntax

```css
@media screen and (max-width: 320px) {
   div {
      width: 250px;
  }
}
``` 

- The first is `@media` which begins the query. 
- I set the media type to `screen`. I used one of the [logical operators](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Logical_operators) `and` which will combine the media type and the condition for the browser. 
- The `max-width` media feature denotes that when the screen size is smaller than `320px`, change the layout to what you will use in the following code block.

## Hit "Edit on CodePen" To follow along.

{% codepen https://codepen.io/GoodGuyGuf/pen/bGpLpmr %}

And there you have it, this blog covered the general basics of media queries. Thanks for reading!

## Resources

- [MDN Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
- [Newer HTML/CSS Features For Responsive Design](https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/)
- [MDN Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
- [W3Schools Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
- [CSS-Tricks Media Queries](https://css-tricks.com/css-media-queries/)
- [Media Queries For Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)