Media Queries: How to target desktop, tablet, and mobile?

Question

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?

Asceticism

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine – Albi

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices – Tallie

This article from 2019 have references to Bootstrap and some other frameworks: ricostacruz.com/til/css-media-query-breakpoints – Hexavalent

Answer 1

IMO 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.

Willowwillowy

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18 – Sulla

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ? – Votaw

This code doesn't work on my mobile devices! Can someone provide a working example! – Terror

@Terror Each one needs to be wrapped in the @media syntax. See updated answer. – Willowwillowy

Maybe add one query after @ media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } This targets several sets of divices: 680px, 960px and the 800 serious. Maybe add one more query here. @media (min-width:800px) – Fidelafidelas

ryanve, Im studying media queries and Im looking for the best media queries to use, why do you say that media queries of your answer are the best? – Feminism

@Feminism Use whichever breakpoints work best for your design. I tend to like breakpoints that divide nicely with whatever grid system I'm using. I often use 960 grids. – Willowwillowy

Thanks for your answer ryanve. After some study Im doing a method, that is...I'm starting to draw to devices with more than 1200px of width, and then I'll resizing, decreasing the browser and when my content start to be hide, I devellop a new media querie for that interval of resolution. For example if my content starts to hide at 1024px I devellop a media querie like: @media screen and (min-width:801px) and (max-width:1024px) and I just tighten my content. – Feminism

Does somebody have the "max-width" equivalent of this? – Honaker

This works for me on mobiles. @media screen and (min-width: 320px) and (max-width: 479px) { #current_marker{ width: 170px; } } ... u need to make sure any styles defined after this do not override the styles created inside here.. for example if later on in the stylesheet u define #current_marker{} again then it will override the style above.. #current_marker{width: 250px;}.. then the width will be 250 even on mobile... unless you put the new definiton into another media query.. @ media screen and (min-width: 480px) { #current_marker{width: 250px;}} .. – Saks

What is the difference between this and twitter bootstrap from here ? which is best ? – Shamekashameless

2018 - 2k and 4k are on the increase – Tefillin

I watched a few video tutorials and they suggest to use media query: @media (max-width:320px) for mobile device. But there are things I don't understand. For modern mobiles (samsung, oneplus etc) the resolution is often 1080x1920px or maybe higher. So why is max-width:320px work in this case? – Brenna

@Brenna Please search for "Device Pixel Ratio" (DPR). There is a difference between physical and CSS-Pixels. If the DPR is 3, 1 CSS pixel represents 3 physical pixels. So if you create a 1x1 pixel sized HTML element, it will be displayed on your screen with 3x3 device pixels. developer.mozilla.org/en-US/docs/Web/API/Window/… – Legionnaire

Would strongly suggest adding max-width for each point too, just incase youre wondering why broader scopes are being targeted :) :) – Weinstein

The majority of breakpoints I've come across use min-width of 800, 1024, and 1280 instead of 801, 1025, and 1281. – Leatrice

You are not considering the zoom factor of the browser and the operating system. – Anarthrous

@NikolayMakhonin you can use em units as mentioned – Willowwillowy

768 for tablets – Soddy

Answer 2

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

• develop the site for mobile first using percentages or ems, not pixels,
• then try it in a larger viewport and note where it begins to fail,
• redesign the layout and add a CSS media query just to handle the broken parts,
• repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

The 'breakpoints' then become the actual point at which your mobile design begins to 'break' i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.

If you're not trying to pin design to exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpoint ensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, not for a specific device size.

See Lyza Gardner's post on behavioral breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the initial idea.

Use semantic markup

Further, the simpler and more semantic the DOM structure with nav, header, main, section, footer etc. (avoiding abominations like div class="header" with nested inner div tags) the easier it will be to engineer responsiveness, especially avoiding floats by using CSS Grid Layout (Sarah Drasner's grid generator is a great tool for this) and flexbox for arranging and re-ordering according to your RWD design plan.

Bravissimo

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels. – Up

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad. – Bravissimo

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device – Hayse

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels? – Lowpressure

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS. – Bravissimo

this is not true, consider this case: :hover shows some buttons, works on desktop but breaks on device – Demagnetize

@Demagnetize which is why hover is useless on touch-navigated devices, so needs an alternative? – Bravissimo

@DaveEveritt how would you fix this problem on touch device? hover is useless for touch but without a specific targeting size cannot be resolved – Demagnetize

@Demagnetize one solution: you can use touch to hide/reveal menus by (ab)using the 'checked' property e.g. css-tricks.com/the-checkbox-hack – Bravissimo

what about displaying correctly sized images? – Ugrian

@JackRiley for images delivered to screen size[srcset](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) is pretty well supported now, otherwise for (say) a gallery if the images have been well-optimised and aren’t to big/too many, % scaling the figure tag with img set to 100% inside a flexbox works pretty well. Advantage is the large images are already loaded for a lightbox. – Bravissimo

This is all very good advice; one thing I would disagree with is the conventional wisdom to develop "mobile first". To me it's better to develop your best, most full-featured page (biggest desktop), and then scale it down and gradually remove content as needed for smaller screens. One other consideration is to assume that smaller devices have lower bandwidth and processing power than corresponding desktops and so also scale down resource-intensive content like videos, sliders, large images, etc. – Chlorobenzene

I think the original idea of "mobile first" has been to put the focus on the essential elements and content, then build it up for larger-scale screens. Good point about the resource-intensive content. – Bravissimo

Answer 3

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

@media only screen and (min-device-width: 768px){}

Here are some good articles:

• How to fit your website for the Apple iPad
• CSS3 Media Queries

Alaynaalayne

My tablet has a width of 2560x1600 – Kerek

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen! – Gotthelf

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device? – Rollway

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024. – Publish

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited – Kindrakindred

Use min-width over min-device-width to target a broad range of devices. Google Developers – Woodwork

There is only "iPhone" and "Other device" on market. ok. And iPhone 3 and before had 320px width. So the first heading should be "For iPhone 4 and above". – Industrials

One of the links if broken, please fix – Moramorabito

And now the device-width (and height) got deprecated: developer.mozilla.org/en/docs/Web/CSS/@media/device-width – Bagpipe

For me, it worked when I used max-width instead of min-width – Vainglory

Answer 4

1. I have used this site to find the resolution and developed CSS per actual numbers. My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

2. Also, have this debugging piece of code right after your media query e.g:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* for 10 inches tablet screens */
     body::before {
       content: "tablet to some desktop media query (769 > 1281) fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
     }
   } 
   

   Add this debugging item in every single media query and you will see what query has being applied.

Fidelafidelas

The link you shared does not work anymore, but there is this: screenresolutiontest.com – Infielder

Answer 5

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Source: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Sprinkling

this answer required a source link. So if Twitter bootstrap changes its value, that we can get it reflected here. Could you please attach a source? Thanks – Hexavalent

I don't think these the breakpoint used in Bootstrap 5 , the use x-small < 576px, small < 768 , medium < 992 , large < 1200, x-large < 1400, xx-large > 1400 see getbootstrap.com/docs/5.0/layout/breakpoints – Timekeeper

Answer 6

Media queries for common device breakpoints

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Boatright

Answer 7

1. Extra small devices (phones, up to 480px)
2. Small devices (tablets, 768px and up)
3. Medium devices (big landscape tablets, laptops, and desktops, 992px and up)
4. Large devices (large desktops, 1200px and up)
5. portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px
6. portrait tablets, portrait iPad, landscape e-readers - min-width:641px
7. tablet, landscape iPad, lo-res laptops - min-width:961px
8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
9. Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
10. Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
11. Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
15. iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
16. iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
17. iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
18. iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

Upton

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked. – Fidelafidelas

Answer 8

This is only for those who haven't done 'mobile-first' design to their websites yet and looking for a quick temporary solution.

For Mobile Phones

@media (max-width:480px){}

For Tablets

@media (max-width:960px){}

For Laptops/Desktop

@media (min-width:1025px){}

For Hi-Res Laptops

@media (max-width:1280px){}

Blaeberry

Answer 9

Nice and simple

/* Mobile Devices */
@media (max-width: 480px) {
    foo > bar {
            
    }
}
        
/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
    foo > bar {
        
    }
}
        
/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
    foo > bar {
        
    }
}
    
/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
    foo > bar {
        
    }
}
    
/* Big boi Monitors */
@media (min-width: 1281px) {
    foo > bar {
        
    }
}

Trude

These measures are the same as what Bootstrap is using, I assume. – Ingridingrim

Answer 10

Nowadays the most common thing is to see retina-screen devices, in other words: devices with high resolutions and a very high pixel density (but usually smaller than 6 inches physical size). That's why you will need retina display specialized media-queries on your CSS. This is the most complete example I could find:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Source: CSS-Tricks Website

Skeleton

Does this dpi/pixel-ratio media query also trigger if people with 4k screens discover they can't actually see that many pixels and run everything at >=2x scaling, or if they zoom in the browser to >200%? – Jumbled

Answer 11

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

The easiest way to go about this is to grab your completed desktop design and open it in your web browser. Shrink the screen slowly to make it narrower. Observe to see when the design starts to, "break", or looks horrible and cramped. At this point a break point with a media query would be required.

It's common to create three sets of media queries for desktop, tablet and phone. But if your design looks good on all three, why bother with the complexity of adding three different media queries that are not necessary. Do it on an as-needed basis!

Rehabilitation

Exactly, and developing mobile-first makes sense as it's (from experience!) a lot easier to rearrange stuff when you have more space, rather than less :-) – Bravissimo

Answer 12

One extra feature is you can also use media-queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Receivable

Answer 13

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density. Hence "min-width:" and "max-width:" are useless. A full explanation of this issue is here: what exactly is device pixel ratio?

"@media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

Malissa

Great. So what should the media queries be? – Porshaport

Answer 14

Best solution for me, detecting if a device is mobile or not:

@media (pointer:none), (pointer:coarse) {
}

Immanuel

This answer doesn't tell whether a device is a mobile or not, it tell if the device has a pointing device. from MDN: " pointer...whether the user has a pointing device (such as a mouse)" – Bagpipe

I have android with mouse and keyboard – Effort

I have a desktop with touchscreen but W/O mouse – Laurynlausanne

Answer 15

If you wanna create more specific media queries here is an example for IPhone which is copied from this link https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and you can find media queries for more devices at this link )

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Grackle

Answer 16

• Extra small devices ~ Phones (< 768px)
• Small devices ~ Tablets (>= 768px)
• Medium devices ~ Desktops (>= 992px)
• Large devices ~ Desktops (>= 1200px)

Cervantes

Answer 17

I am using following one to do my job.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Klement

Answer 18

There is a way to simplify all of this:

<500px: 's' Vertical Phones

>500px: 'l' Desktop, TV, Tablets, Phones in Horizontal mode

Note: The reason I picked 500 is because the smallest you can change the width of the desktop window is 500, thus anything bigger is desktop and aything smaller will be vertical mobile.

You can design your website only using these breakpoints since there will always be an overlap between Desktop, TV, Tablets and horizontal phones. If your design looks good on a small desktop (Example: 600px) then it would also look good on the rest of the devices.

1 more breakpoint can be added so that small desktop and tablets have a better design with more space:

<500px: 's' Vertical Phone

500px - 1200px: 'm' Small Desktop, Tablets, Horizontal Phones

>1200px: 'l' Large Desktop, Horizontal Tablets

The media queries:

/*<500px S*/
@media only screen and (max-width: 499px) { }

/*500-1200 M*/
@media only screen and (min-width: 500px) and (max-width: 1199px) { }

/*>1200px L*/
@media only screen and (min-width: 1200px) { }

Nursemaid

IMHO - this is the simplest and best approach. – Insignia

it doesn't work for Pixel android – Wappes

@GhazalehJavaheri Why not? Do you mean since horizontlly it will be bigger than 500px? – Nursemaid

Answer 19

The behavior does not change on desktop. But on tablets and mobiles, I expand the navbar to cover the big logo image. Note: Use the margin (top and bottom) as much as you need for your logo height.

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Check the navbar here.

Rogerrogerio

Answer 20

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

you can also add one more for for sceen smaller then 320px like Galaxy fold

Methaemoglobin

Answer 21

It's not just about resolution, you also need to find DPR of the device:
whatismyscreenresolution "Device Pixel Ratio(DPR) is a number given by device manufacturers and it's used for HiDPI(High Dots Per Inch) or Retina(Apple's trademark) displays"

Media query example: (min-resolution: 3.0dppx)

Bernice

Answer 22

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }

Lemley