DEV Community

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

Posted on • Edited on

6 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay