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

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

3️⃣ Laptops

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

This is how I write breakpoints

4️⃣ Desktops and Larger Screens

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

This is how I write breakpoints

5️⃣ Desktops and Larger Screens

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

This is how I write breakpoints

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 🧡