DEV Community

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

Posted on • Updated 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

suneeh profile image

🔍 Searching the web

Suneeh -

ootkin profile image

From Code to OpenAPI spec with Ease using SkimX

ootkin -

sainsec profile image

Cross-Site Request Forgery (CSRF)

Hussain -

ng_news profile image

Episode 24/15: Wiz behind the curtain, Copilot in VSCode

ng-news -