相同媒體查詢最小和最大寬度以及不同佈局

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 
    } 

} 

從來不知道這是可能的。但是這有什麼缺點？

謝謝！