Media Queries How to target desktop tablet and mobile

0 votes


I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile 
only screen and (min-width: 480px) 

# Tablet 
only screen and (min-width: 768px)

# Desktop 
only screen and (min-width: 992px) 

# Huge 
only screen and (min-width: 1280px)


Or:

# Phone 
only screen and (max-width:320px) 

# Tablet 
only screen and (min-width:321px) and (max-width:768px) 

# Desktop 
only screen and (min-width:769px)

What should the breakpoints be for each device? Any help will be appreciated.

Feb 11 in Others by Rahul
• 8,980 points
390 views

1 answer to this question.

0 votes

I would personally believe that these are the best breakpoints:

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) /
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } 
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } 
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:
 

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em. In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens. Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

answered Feb 11 by Soham
• 8,730 points

Related Questions In Others

0 votes
1 answer
0 votes
1 answer

How to Navigate to a new screen and back?

Hi@akhtar, Most apps contain several screens for displaying ...READ MORE

answered Aug 26, 2020 in Others by MD
• 95,360 points
184 views
0 votes
1 answer

How to connect mobile camera to Flutter App?

Hi@akhtar, You need to install the plugin to ...READ MORE

answered Sep 14, 2020 in Others by MD
• 95,360 points
200 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 10,640 points
500 views
0 votes
0 answers

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, ...READ MORE

May 7 in Others by narikkadan
• 10,640 points
49 views
0 votes
1 answer
0 votes
1 answer

Make an image responsive - the simplest way

You can try doing <p> <a href="MY ...READ MORE

answered 6 days ago in CSS by Edureka
• 8,460 points
4 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,465 views
0 votes
1 answer

How to take a screenshot of a current Activity and then share it?

For me, I captured and then shared ...READ MORE

answered Feb 8 in Others by Soham
• 8,730 points
15 views
0 votes
1 answer

How to delete duplicate rows in SQL Server?

To answer your query, note that CTEs ...READ MORE

answered Feb 10 in Others by Soham
• 8,730 points
82 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP