<分区>
<分区>
我有一些媒体查询，但我被要求为更大的屏幕做一个。 我修改了这个媒体查询:
@media only screen and (min-width: 900px){
.right div{
padding-left: 3rem;
}
.right div:nth-child(1){
padding-right: 3rem;
}
.right div:nth-child(1), .right div:nth-child(2){
padding-top: 3rem;
}
.right div:last-child{
padding-bottom: 2rem;
}
}
但后来我添加了新的媒体查询并修改了较小的查询，添加了最大宽度，但新的媒体查询没有加载(最小宽度为 1600 像素的那个):
@media only screen and (min-width: 900px) and (max-width: 1599px){
/*code*/
}
@media only screen and(min-width: 1600px){
.right div:nth-child(4){
padding-right: 6rem;
}
.right div{
padding-left: 3rem;
}
.right div:nth-child(1){
padding-right: 3rem;
}
.right div:nth-child(1), .right div:nth-child(2){
padding-top: 3rem;
}
.right div:last-child{
padding-bottom: 2rem;
}
}
这就是我之前所有媒体查询的方式:
@media only screen and (max-width: 600px) {
/*some code*/
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
/*some code*/
}
@media only screen and (min-width: 900px){
/* some code */
}
最佳答案
这是一个小错误。您的 and 和 (min...)
改变:
@media only screen and(min-width: 1600px){
到:
@media only screen and (min-width: 1600px){
建议:使用 CSS validator捕捉这些类型的错误。
关于html - 为什么只有一个媒体查询不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51774816/