How to create: breakpoints for typical devices

Learn how to use media queries for common device breakpoints.

Typical device breakpoints

There are a large number of screens and devices with different heights and widths, so it is difficult to create accurate breakpoints for each device.

To simplify operations, you can locate five common categories:

Examples

/* Extra small devices (phones, 600px and below) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and above) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and above) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and above) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and above) */
@media only screen and (min-width: 1200px) {...}

Try it yourself

Related pages

Tutorial:CSS Media Query

Tutorial:CSS media query examples

Reference manual:CSS @media Rule

Tutorial:Responsive web design through media queries

Reference manual:JavaScript window.matchMedia() method