How to create: breakpoints for typical devices
- Previous page Closable list items
- Next page Draggable HTML elements
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) {...}
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
- Previous page Closable list items
- Next page Draggable HTML elements