What Are The Best Width Ranges for Media Queries

Question

What are the best width ranges for detecting media queries in a responsive design   I would like to cover all Desktop Laptop monitors  with one orientation  in 4 media queries but I do not know if it is possible for example  small monitors  medium monitors  large and extra large monitors   For example in this code     Desktops and laptops -----------      media only screen and  min-width   1224px         Large screens -----------      media only screen and  min-width   1824px       I think we need still to device the Desktops and laptops media into three sub media as small  like 13  to 14 laptops   medium  like 15 to 17  and large  over 22    I know that the browser resolution is different than screen resolutions but let s say we have browsers in full-screen mode in all formats

User · Answer

best bet is targeting features not devices unless you have to  bootstrap do well and you can extend on their breakpoints  for instance targeting pixel density and larger screens above 1920

User · Answer

You can take a look here for a longer list of screen sizes and respective media queries   Or go for Bootstrap media queries      Large desktop     media  min-width  1200px              Portrait tablet to landscape and desktop     media  min-width  768px  and  max-width  979px              Landscape phone to portrait tablet     media  max-width  767px              Landscape phones and down     media  max-width  480px            Additionally you might wanty to take a look at Foundation s media queries with the following default settings      Media Queries   screenSmall  768px  default   screenMedium  1279px  default   screenXlarge  1441px  default

User · Answer

Try this one with retina display     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          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  -webkit-min-device-pixel-ratio   1 5   only screen and  min-device-pixel-ratio   1 5       Styles        Update     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  landscape  -----------     media only screen and  min-device-width  768px  and  max-device-width  1024px  and  orientation  landscape  and  -webkit-min-device-pixel-ratio  2         Styles          iPad 3  portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  320px  and  max-device-width  480px  and  orientation  landscape  and  -webkit-min-device-pixel-ratio  2         Styles          iPhone 4  portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  320px  and  max-device-height  568px  and  orientation  landscape  and  -webkit-device-pixel-ratio  2         Styles          iPhone 5  portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  375px  and  max-device-height  667px  and  orientation  landscape  and  -webkit-device-pixel-ratio  2         Styles          iPhone 6  portrait  -----------     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   landscape  -----------     media only screen and  min-device-width  414px  and  max-device-height  736px  and  orientation  landscape  and  -webkit-device-pixel-ratio  2         Styles          iPhone 6   portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  320px  and  max-device-height  640px  and  orientation  landscape  and  -webkit-device-pixel-ratio  2         Styles          Samsung Galaxy S3  portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  320px  and  max-device-height  640px  and  orientation  landscape  and  -webkit-device-pixel-ratio  3         Styles          Samsung Galaxy S4  portrait  -----------     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  landscape  -----------     media only screen and  min-device-width  360px  and  max-device-height  640px  and  orientation  landscape  and  -webkit-device-pixel-ratio  3         Styles          Samsung Galaxy S5  portrait  -----------     media only screen and  min-device-width  360px  and  max-device-height  640px  and  orientation  portrait  and  -webkit-device-pixel-ratio  3         Styles

[css] What Are The Best Width Ranges for Media Queries

Examples related to css

Examples related to responsive-design

Examples related to media-queries