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
• 9,680 points
1,522 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
• 9,670 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,380 points
249 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,380 points
259 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
• 37,660 points
1,119 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
• 37,660 points
136 views
0 votes
1 answer
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

Jun 30 in CSS by Edureka
• 12,390 points
57 views
0 votes
1 answer

Make an image responsive - the simplest way

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

answered Jun 21 in CSS by Edureka
• 10,880 points
44 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
• 9,670 points
55 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
• 9,670 points
260 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP