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, 2022 in Others by Rahul
• 9,680 points
4,421 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, 2022 by Soham
• 9,710 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,460 points
639 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,460 points
661 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, 2022 in Others by narikkadan
• 63,720 points
2,095 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, 2022 in Others by narikkadan
• 63,720 points
670 views
0 votes
1 answer

How to use CSS media query to scale background-image to viewing window

If you only want the desktop version ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
1,266 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

Jun 30, 2022 in CSS by Edureka
• 13,620 points
454 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, 2022 in CSS by Edureka
• 12,690 points
453 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, 2022 in Others by Soham
• 9,710 points
992 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, 2022 in Others by Soham
• 9,710 points
1,080 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