Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What Are The Best Width Ranges for Media Queries

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.

like image 242
user1760110 Avatar asked Nov 30 '12 00:11

user1760110


People also ask

What size media queries should I use?

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.

Should I use max width or min-width in media queries?

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.

What is max width in media query?

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.


1 Answers

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 */ } 
like image 197
Mo. Avatar answered Sep 25 '22 13:09

Mo.