способ написания медиазапросы

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

, как всякий раз, когда дизайн перерывов я пишу, что размер в макс -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.