Widths to Use in Media Queries

Media Queries Between Widths

Correct syntax is :

 @media (min-width: 769px) and (max-width: 1340px) {
         .target-side-col li{
                padding-left:24px;
          }

    }

Widths to use in media queries

I'm looking everywhere for the best answer for this. Here what I found.

@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 */ }

I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for @ryanve. Here is the link.

Media Queries - In between two widths

You need to switch your values:

/* No less than 400px, no greater than 900px */
@media (min-width:400px) and (max-width:900px) {
    .foo {
        display:none;
    }
}​

Demo: http://jsfiddle.net/xf6gA/ (using background color, so it's easier to confirm)

how to use min-width in media query

The order of the code is important in CSS, that means that if there's a duplicate rule, the first rule will be overridden by the second one, so keep this in mind when you apply styles over the same class in different places in your code.

min-width rules will be applied for each resolution higher than the pixels set, and max-width rules will be applied for each resolution below the pixels set.

You can do a combination of both: @media screen and (min-width: 320px) and (max-width: 900px). All the rules in this media query will be applied if the window is wider than 320px but not if it's above 900px.

How can I apply a Media Query to both Height and Width?

@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }

Here is the possible duplicate question:

Media Queries: check min-height and min-width?

Here are a few references from the question :

First reference

Second reference

Which are the most important media queries to use in creating mobile responsive design?

I'd recommend taking after Twitter's Bootstrap with just these four media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Check it out on Bootstrap 3's docs.

---

Related Topics