DEV Community

Cover image for Device Sizes for CSS Media Queries
Gaurav Vala
Gaurav Vala

Posted on • Edited on

Device Sizes for CSS Media Queries

#webdev #css #tutorial #beginners

When dealing with Responsive Web Designs you will have to use @media queries to change the look of your website in different device sizes.

In this blog post, you can find different device sizes you can use with your @media queries.

Phones 



(min-device-width : 320px) and (max-device-width : 480px)
Enter fullscreen mode Exit fullscreen mode

Teblets 



(min-device-width : 481px) and (max-device-width : 768px)
Enter fullscreen mode Exit fullscreen mode

IPads 



(min-device-width : 769px) and (max-device-width : 1024px)
Enter fullscreen mode Exit fullscreen mode

IPads pro, Tablets pro 



(min-device-width : 1025px) and (max-device-width : 1366px)
Enter fullscreen mode Exit fullscreen mode

Laptop 



(min-device-width : 1367px) and (max-device-width : 1760px)
Enter fullscreen mode Exit fullscreen mode

Large Screen 



(min-device-width : 1760px) and (max-device-width : 1920px)
Enter fullscreen mode Exit fullscreen mode

If you found the content i share useful then share it with your developer friends and also follow me on Instagram and Twitter

Top comments (0)

Read next

shinetechsoftwareinc profile image

How to Add Competitiveness to Your Remote Development Team

Shinetech Software -

elanatframework profile image

Migrating Project from ASP.NET Core MVC to CodeBehind Framework

elanatframework -

leandroveiga profile image

Mastering Error Handling in .NET 8: Strategies for Minimal APIs and Controllers

Leandro Veiga -

sakib3201 profile image

Refactoring conditionals: The first steps to cleaner code.

sakib ahamed shahon -