Запрос на поиск в одном и том же средстве и максимальную ширину с различными макетами

Question

У меня проблема с медиа-запросами с точки зрения макета. Пример, у меня есть:

@media screen and (min-width: 768px) and (max-width: 1024px) { 

    .this-is-a-box { 
     font-size: 20px; 
     padding-left: 5%; 
     padding-right: 5%; 
    } 

} 

Но когда макет становится меньше 920px в ширину, мне потребуется значение для достижения:

.this-is-a-box { 
    font-size: 15px; 
    padding-left: 1%; 
    padding-right: 2%; 
} 

Надежда кто-то может помочь с этим.

Спасибо!

Answer 1

Soooo Почему бы не использовать два медиа-запроса, чтобы указать эту границу?

/* Small screens */ 
@media screen and (max-width: 919px) { 

    .this-is-a-box { 
     font-size: 15px; 
     padding-left: 1%; 
     padding-right: 2%; 
    } 

} 
/* Larger screens */ 
@media screen and (min-width: 920px) { 

    .this-is-a-box { 
     font-size: 20px; 
     padding-left: 5%; 
     padding-right: 5%; 
    } 

} 

Answer 2

Умел эксперимент по предложению GolezTrol и вместо этого сделал это так:

@media screen and (min-width: 768px) and (max-width: 919px) { 

css here 

} 


@media screen and (min-width: 768px) and (max-width: 1024px) { 

css here 

    @media screen and (min-width: 920px) { 

     css here 
    } 

} 

Никогда не знал, что это возможно. Но какие-то недостатки в этом?

Спасибо!