相同媒体查询最小和最大宽度以及不同布局

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 
    } 

} 

从来不知道这是可能的。但是这有什么缺点？

谢谢！