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 🧡
Top comments (0)