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 🧡

Top comments (0)