# CSS: Media Queries

Hello Fellow Codenewbies 👋

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

<br>
# Media Queries
Media queries are used for responsiveness purposes.
<br>
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**
<br>
  It targets the ***screen-based*** device such as mobile phone, tablet, or desktop.
   ```css
@media screen (...) {...}
   ``` 
- **print**
<br>
  It targets a document for ***printing*** purpose.
<br>
  This type allows users to print out a page in a format that we have set the rules on.
   ```css
@media print {...}
   ``` 

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

- **all**
<br>
   It targets ***all*** media types above.
<br>
   ⭐ 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**
    <br>
    Applying specific style *from* the size of the stated value *and bigger*.
<br>
    When we are doing **mobile-first**, we start with min-width first and add more rules as we increase the size.
  - **max-width**
    <br>
    Applying specific style *until* the stated value.
<br>
    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**
<br>
      The orientation when the page view is **taller** than wide
   - **landscape**
<br>
      The orientation when the page view is **wider** than tall
 
## Additional Important Notes
- Applying *both* media-types and conditions are ***optional***.
<br>
   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`.
   ```
@media screen and (min-width: 640px) and (max-width: 1000px) {...}
   ``` 

- **Order is important**.
<br>
  Sticking to the basic CSS rule, *whatever comes next wins*.
  <br>
  So we need to apply media queries *after* the initial style to override it.
<br>
  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.

%[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