媒体查询CSS3不适用于最大宽度：420px

Question

我想使我的网站响应和所有大小正常工作，但问题是当他们使用媒体查询992px信息，而不是420px为什么< 420px为什么？ 问题是所有类在420PX正常工作，但在这个类中，他们采取了992px

@media (max-width: 420px) { 
 
    div.test { 
 
    width: 200px; 
 
    } 
 
}

<div class="container test"> 
 
    <img src="img/img.png"> 
 
</div>

Answer 1

听起来好像您在定义媒体查询max-width:420px后调用了max-width:992px媒体查询。请记住，CSS是自上而下编译的，并且您的逻辑需要适应这一点。相反，请考虑您的媒体查询顺序：

@media (max-width:992px) { 
    ... 
} 

@media (max-width:420px) { 
    ... 
} 

Answer 2

最好的做法是建立的网站“移动第一”，意为默认值对于移动版本，然后您可以使用媒体查询覆盖宽度定义。

所以，如果你想为200px上420PX宽度，以及400像素的宽992px，你应该这样做：

.test { 
    width: 200px; 
} 
@media screen and (min-width: 992px) { 
    .test { 
    width: 400px; 
    } 
} 

始终使用min-width始终与小分辨率开始和更大的分辨率覆盖。