What Are Good Resolution Values to Use with Media Queries

What are good resolution values to use with media queries?

See this article for a template '320 and Up' - by Andy Clarke, it's used by many developers and designers: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).

To explain the ranges:

min-width: 480px: Will target mobile devices in landscape mode and up

min-width: 600px: Targets tablets in portrait mode and up

min-width: 768px: Targets tablets in landscape mode and up

min-width: 1024px: Targets the desktop view

And typically I will have my mobile portrait view CSS at the very beginning (hence the term "320 and up").

When do we use media-queries resolution in css?

One real-world example usage is when performing printing of web document:

@media print and (min-resolution: 300dpi) { ... } 

The above media query will display given styles when printing DPI is set at minimum of 300dpi.

Media queries for higher resolutions

When using 2 or more media queries, their order in the CSS matters.

Here is a "bigger first" solution, where body starts gray and change when screen gets smaller

Fiddle demo

body {  background: gray;}
@media only screen and (max-width: 1000px) {  body {    background: red;  }}@media only screen and (max-width: 800px) {  body {    background: blue;  }}@media only screen and (max-width: 600px) {  body {    background: green;  }}

Media Queries: Target all high resolutions displays

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

/* 2 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    /* Retina-specific stuff here */
}

Higher resolution media query overrides lower resolution media query

@media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your @media(max-width: 640px) media query comes after @media(max-width: 320px), the rules or equal specificity in the larger media query will override those in the smaller media query.

The simplest fix would be to order your media queries from the largest screen size to smallest.

If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.

@media (min-width:320px) and (max-width: 640px) {
}

CSS media queries for screen sizes

Unless you have more style sheets than that, you've messed up your break points:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

The 3rd media query is probably meant to be min-width: 901px. Right now, it overlaps #1 and #2, and only controls the page layout by itself when the screen is exactly 901px wide.

Edit for updated question:

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

Media queries aren't like catch or if/else statements. If any of the conditions match, then it will apply all of the styles from each media query it matched. If you only specify a min-width for all of your media queries, it's possible that some or all of the media queries are matched. In your case, a device that's 640px wide matches all 4 of your media queries, so all for style sheets are loaded. What you are most likely looking for is this:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

Now there's no overlap. The styles will only apply if the device's width falls between the widths specified.

---

Related Topics