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.
In my experience, 320px, 768px, and 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, tablets/laptops, and desktops, respectively.
If you are designing your website for smaller devices first then set your initial breakpoints with min-width, whereas, if you are designing for larger devices first then use max-width. This post discusses min-width, and max-width media features in detail along with relevant examples.
Taking a look at the CSS file, you'll notice that the media query has a minimum width of 320px and a maximum width of 576px . This just means that all the styles that will go into this rule will only be applicable to devices with extra-small and small widths.
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 */ }
/* 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 */ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With