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

devrx profile image

Linux Installation Fest - A detailed Guide to install Linux

Abhinav Pandey -

magsimuhammadessa profile image

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

Muhammad Essa -

furkangozukara profile image

Example Training Images Dataset, Trained Models, Grids and Full Training Configs, json files and more

Furkan Gözükara -

abhishekjaiswal_4896 profile image

Handling File Uploads in Node.js with Multer: A Comprehensive Guide

Abhishek Jaiswal -