Most Common CSS Screen Sizes
September 01, 2021
The most common css screen sizes is a matter of opinion, even between browsers. Chrome is still the most popular browser, and luckily it comes with dev tools (F12 > Toggle device toolbar) that includes pre-defined screen sizes. You can click on each of these sizes on the bar that run across the top of the dev tools window. The various widths are listed below.
- 320px - Mobile
- 375px - Mobile M
- 425px - Mobile L
- 768px - Tablet
- 1024px - Laptop
- 1440px - Laptop L
- 2560px - 4K
These are some of the css screen sizes I use most often when I’m writing media queries, especially if I’m using Chrome. Firefox has a similar feature in it’s dev tools (F12 > Responsive design mode), but instead of using a clickable bar it has a device selector that includes common devices like “iPhone 6/7/8” or “iPad”.
For me, I prefer using Chrome for checking css screen sizes and breakpoints. The issue with Firefox is that while the device name is easy to understand, I can’t pass the value “iPad” to my media query. I need to know the width in pixels.
/* Invalid */
@media (min-width: iPad) {
...;
}
/* Valid */
@media (min-width: 768px) {
...;
}
The other nice thing that you can do with Chrome’s device toolbar is see custom breakpoints that are set for a given page. This is a really nice feature if you’re inspecting your own custom css screen sizes or another site’s. I especially like using this tool to look at sites I know are of high quality. Sites like stripe and web.dev are great to look at for inspiration.
Below are a few example media queries I commonly use for the screen widths listed at the top. Note that these are all using min-width
. This means that the styles in the media query won’t be applied until the screen size increases to reach the defined pixel width. Using min-width media queries is the basis of mobile first design.
Another important thing to note is that I don’t target every screen size listed above. I typically target Mobile L, Tablet, and Laptop L. I sometimes target others in-between, but it’s not often.
@media (min-width: 425px) {
...;
}
@media (min-width: 768px) {
...;
}
@media (min-width: 1024px) {
...;
}