Breakpoints

What are Breakpoints?

  • The points where your css style will change as a result of your media queries


  @media only screen and (min-width: 320px) {
    /* Styles */
  }

  @media only screen and (min-width: 320px) and (orientation: landscape) {
    /* Styles */
  }

  @media only screen and (min-width: 321px) and (max-width : 700px) {
    /* Styles */
  }

  @media only screen and (min-width: 701px) {
    /* Styles */
  }
  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Breakpoints should be selected based on your specific design