方式查詢

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

像每當設計打破我寫的最多的是大小相同的事情寬度：規則，我得到一個完全響應式設計。但是，這是正確的方式做的方法

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。