CSS: Media Queries
Tags: css, codenewbie, beginners, todayilearned
Published: 2021-01-08 10:49:52

Hello Fellow Codenewbies 👋

So let's say we have finished styling our app.
But on a certain size of the page view, we want to apply a different style to our app.
This is the time where media queries come into play.

# Media Queries
Media queries are used for responsiveness purposes.
It targets some specific types and conditions to apply a different style.

## The Syntax And Explanations

The syntax:

```css
@media () {...}
``` 
We put it this way:

```css
@media media-type and (media-conditions) {...}
``` 

### media-type
Different types of media that we target with media queries.
#### screen

It targets the ***screen-based*** device such as mobile phone, tablet, or desktop.
   ```css
@media screen (...) {...}
   ``` 
#### print

It targets a document for ***printing*** purpose.
This type allows users to print out a page in a format that we have set the rules on.
   ```css
 @media print {...}
   ``` 

#### speech

It targets the devices that read the content ***audibly***, such as a screenreader.
  
   ```css
@media speech {...}
   ``` 

#### all

It targets ***all*** media types above.
⭐ This is what is commonly used.

   ```css
@media all and (...) {...}
   ``` 
     
When we don't assign any type, then by default it will fall into *all*.
   
   ```css
@media (...) {...}
   ``` 

### media-condition
Specific conditions that we target with media queries.

#### Width
  
   ```css
@media (min-width: ...) {...}
   ``` 
   or
   ```css
@media (max-width: ...) {...}
   ``` 
   or
   ```css
@media (min-width: ...) and (max-width: ...) {...}
   ``` 

- **min-width**
 
      Applying specific style *from* the size of the stated value *and bigger*.
      When we are doing **mobile-first**, we start with min-width first and add more rules as we increase the size.

- **max-width**

      Applying specific style *until* the stated value.
      When we are designing our app for **desktop-first** and working our way down, then we better start with max-width.

      📝 Applying `min-width` and `max-width`:

    ```css
  @media (min-width: 400px) and (max-width: 800px) {
     .container {
        display: flex;
     }
  }
    ``` 
      📖 From width of 400px until 800px apply `display: flex` to the element with class container.

#### Orientation

  ```css
@media (orientation: portrait) {...}
   ``` 
  or
```css
@media (orientation: landscape) {...}
   ``` 
   - **portrait**

      The orientation when the page view is **taller** than wide
   - **landscape**

      The orientation when the page view is **wider** than tall
 
## Additional Important Notes
- Applying *both* media-types and conditions are ***optional***.

     We don't need to apply both, but we do have to apply at least one of them.

- To combine media-type with media-condition we have to use `and`.
   ```css
@media screen and (min-width: 640px) and (max-width: 1000px) {...}
   ``` 

- **Order is important**.

    Sticking to the basic CSS rule, *whatever comes next wins*.
    So we need to apply media queries *after* the initial style to override it.
    A good way to do this is to put media queries at the bottom, at the end of all initial style codes.

- We have to state the element that we want to modify *inside* the media queries block scope.

  ```css
  body {
     margin: 0;
     padding: 0;
  }

  h1 {
     color: green;
  }

  .container {
     margin: 0 auto;
  }

  .bigger-paragraph {
    font-size: 2rem;
  }

  @media (min-width: 500px) and (orientation: landscape) {
    h1 {
       color: blue;
    }

    .bigger-paragraph {
      font-size: 4rem;
    }
  }
  ``` 

I provide the Codepen below to play with.

{% codepen https://codepen.io/adiati/pen/qBajzGo %}

## Conclusion

- We use media queries for responsiveness purposes.
- The targets of media queries: 
  - **media-type**
      - screen
      - print
      - speech
      - all (**default**) ⭐
  - **media-condition**
      - **width**
          - min-width
          - max-width
      - **orientation**
          - portrait
          - landscape