## Breakpoints and CSS Media Queries

- MDN: Using media queries
- CSS Tricks: A Complete Guide to CSS Media Queries

### @media CSS Media Query

    /* rules for small screens and all screens */
    body {
      background-color: #005bbb;
      color: #ffd500;
      font-family: helvetica, sans-serif
    }
    h1 { text-align: center; font-size: 3rem;}
    /* only for widths of 768px and wider
       yes, we could have used 48em as a unit
    */
    @media (min-width: 768px) {
      /* specific rules go here */
      body {
        background-color: #ffd500;
        color: #005bbb;
      }
    }

Code Pen Example of Media Query

See the Pen First @media query by David Heitmeyer (@dpheitmeyer) on CodePen.