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.