DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

Device Sizes for CSS Media Queries

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)

Now it's your turn.

Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question
Β 
Create an account to join hundreds of thousands of DEV members on their journey.