How to Write a Media Query in CSS

Media query syntax for Reactjs

If you have a special cases, when you need to get media query result inside you react app (for example, you want to show some component at mobile version), you can use helpers like react-responsive or react-media-hook.

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* 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 */ }

Edit: Refined to work better with 960 grids:

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

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Way of writing media queries

Take 500px as an example, in the first way, only the second property (border) will apply:

/* 500 is not between 767 and 990, so this rule will ignore */
@media screen and (min-width:767px) and (max-width:990px){
    .elem {
        background: red;
    }
}

/* 500 is between 480 and 766, this rull will apply */
@media screen and (min-width:480px) and (max-width:766px){
    .elem {
        border: 10px solid green;
    }
}

jsFiddle Demo.

But in the second way, both of these rules will apply:

/* 500 is smaller than 991, this rull will apply */
@media screen and (max-width:991px){
    .elem {
        background: red;
    }

}

/* 500 is smaller than 767, this rull will apply */
@media screen and (max-width:767px){
    .elem {
        border: 10px solid green;
    }
}

jsFiddle Demo.

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

CSS Media Query Range

Just add a max-width to complete the range:

@media only screen and (min-width: 275px) and (max-width: 500px)
{

    body    
    {
        background-color: black;
    }
}

@media only screen and (min-width: 501px) and (max-width: 750px)
{

    body    
    {
        background-color: blue;
    }
}

CSS: define media query within one class

You should do like this:

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

If you want to target desktop, you can use:

@media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

I just notice you're using SASS, you can do like this:

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

how to make css media query to work on mobile phones

I did not add meta(name="viewport", content="width=device-width, initial-scale=1.0") to my base template. That's why it was acting like that.

How to write media queries for 480*800 and 480*856 devices?

@media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
   body {
      background-color:lime;
   }
}

This would target both devices with the same css code.

Alternatively you could split it into two media queries and target each platform.

When I was new to responsive design I found this article very useful: http://css-tricks.com/css-media-queries/

---

Related Topics