Question

我看到一些像这样写的响应，

@media screen and (min-width:991px) and (max-width:1200px){
    /* styles */
}   

@media screen and (min-width:767px) and (max-width:990px){
    /* styles */
}

@media screen and (min-width:480px) and (max-width:766px){
    /* styles */
}

我用这种方式写的同样的东西

@media screen and (max-width:991px){
    /* styles */
}   

@media screen and (max-width:767px){
    /* styles */
}

@media screen and (max-width:480px){
    /* styles */
}

就像设计中断时我在max-width：rule中写出那个大小，我得到一个完全响应的设计。但是这是执行方法的正确方法

Answer 1

以500px为例，第一种方式只应用第二个属性（border）：

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

但第二种方式，这两条规则都适用：

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

编写媒体查询的方式

1 个答案: