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

thisweekinjavascript profile image

JavaScript vs. Deno, Vite 6, Astro 5, and more

James -

xmanhugo profile image

How to understand the ins and outs of how DNS really works.

xmanhugo -

dazevedo profile image

What is SignalR? A Real-Time Communication Framework for .NET

Daniel Azevedo -

dotnetfullstackdev profile image

Autofac Dependency Injection in ASP .NET Core 8

DotNet Full Stack Dev -