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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Extra small devices  phones  up to 480px   Small devices  tablets  768px and up   Medium devices  big landscape tablets  laptops  and desktops  992px and up   Large devices  large desktops  1200px and  up    portrait e-readers  Nook Kindle   smaller tablets -    min-width 481px  portrait tablets  portrait iPad  landscape e-readers   - min-width 641px  tablet  landscape iPad  lo-res laptops - min-width 961px HTC One     device-width  360px device-height  640px    -webkit-device-pixel-ratio  3 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   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  -   Samsung Galaxy S4  device-width  320px device-height  640px   -webkit-device-pixel-ratio  3   LG Nexus 4  device-width  384px device-height  592px -webkit-device-pixel-ratio  2   Asus Nexus 7   device-width  601px device-height  906px -webkit-min-device-pixel-ratio  1 331  and  -webkit-max-device-pixel-ratio  1 332  iPad 1 and 2  iPad Mini   device-width  768px device-height  1024px   -webkit-device-pixel-ratio  1   iPad 3 and 4 device-width  768px device-height  1024px -webkit-device-pixel-ratio  2   iPhone 3G  device-width  320px device-height  480px   -webkit-device-pixel-ratio  1   iPhone 4   device-width  320px device-height  480px -webkit-device-pixel-ratio  2   iPhone 5   device-width  320px device-height  568px -webkit-device-pixel-ratio  2

User · Answer

Extra small devices   Phones   lt  768px   Small devices   Tablets     768px   Medium devices   Desktops     992px   Large devices   Desktops     1200px

User · Answer

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

User · Answer

One extra feature is you can also use-media queries in the media attribute of the  lt link gt  tag    lt link href  style css  rel  stylesheet  gt   lt link href  justForFrint css  rel  stylesheet  media  print  gt   lt link href  deviceSizeDepending css  rel  stylesheet  media   min-width  40em   gt    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  lt link gt  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

User · Answer

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

User · Answer

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

User · Answer

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  quot header quot  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Best solution for me  detecting if a device is mobile or not   media  pointer none    pointer coarse

User · Answer

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   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  gt  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

User · Answer

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  quot mobile-first quot  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

User · Answer

xs    quot extra-small quot    s     quot small quot    m     quot medium quot    l     quot large quot    xl    quot extra-large quot     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

User · Answer

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

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

Examples related to css

Examples related to mobile

Examples related to media-queries

Examples related to tablet