Most Common CSS Screen Sizes

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) {
  ...;
}