DEV Community

Shubhra Agarwal
Shubhra Agarwal

Posted on

The only Media Queries Cheatsheet you'll need

You learnt about media queries but now you're thinking how do I implement them, there are so many devices that it's practically impossible for someone to write media queries for each and every device.

There is a common observation that a certain type of device has a particular range and we can easily implement media queries in this range rather than making it device specific.

Let's take a look into what these groups are

1️⃣ Mobile Devices

The general width of any mobile device ranges from 320px-480px,

you can set the minimum to be 320px and max to be 480px. This is how I like to write breakpoints for my media queries
Mobile

2️⃣ iPads and Tablets

The general width of any tablets ranges from 481px-768px,

There are cases when the tablet is being used in landscape mode instead of portrait mode, but that dimensions are covered by laptop breakpoints

This is how I write breakpoints
iPads

3️⃣ Laptops

The general width of any laptop ranges from 769px-1024px,

This is how I write breakpoints
Laptop

4️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px,

This is how I write breakpoints
Desktop

5️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px,

This is how I write breakpoints
Extra large

TL;DR

  • Mobile Devices (320-480px)
  • Tablets (481-768px)
  • Laptops (769-1024px)
  • Desktops (1025px- 1200px)
  • TVs (1200px and further)

Thank you for reading this blog post. Do leave your reviews in the replies, I would love to hear them 🧡

Discussion (1)

Collapse
lukeshiru profile image
Luke Shiru

I written a comment in a similar article published a few days back, but saying "320x480 is mobile and 1200px is TV" is kinda outdated. On one side, mobile devices can have 4k screens, so assuming a 1200px is a TV is wrong. On the other side, coding media queries thinking in devices instead of just thinking in actual sizes is wrong. The idea with media queries is that you toggle styles based on the size of the screen, not on the "current device".

Cheers!