@media only screen and (max-width: 620px) {
.priority-images{
width: 65% !important;
}
}
@media only screen and (min-width: 320px) {
.priority-images{
width: 90% !important;
}
}
.priority-images正在注册620断点而不是320断点，这让我感到沮丧，我知道它的目标是下面的所有东西，但是当我在没有任何建议的情况下成功使用此方法时？
基本上，你是以下两者mobile-first (min-width)并desktop-first(max-width)接近在一起。320px to 620px在这种情况下，这里有一个重叠320px takes precendence not the 620px.
在您的媒体查询中：
@media only screen and (max-width: 620px) {...}
视口是从目标width=0到width=620px的画面。但是，当您使用时：
@media only screen and (min-width: 320px) {...}
现在，当您的浏览器宽度变为320px时，此620px媒体查询将被覆盖。
而按我的观察和代码剪断，将.priority图像不是在得到优先620px，但在320像素本身。当min-width:320px浏览器宽度大于或等于320px时，媒体查询将完全控制CSS。因此，我看不到在所有320px浏览器宽度min-width:620px之后都应用媒体查询。
检查以下代码段：
body {
height: 100vh;
width: 100vw;
}
.priority-images {
height: 90%;
margin: 0 auto;
}
@media only screen and (max-width: 620px) {
.priority-images {
width: 65% important;
background: orange;
}
}
@media only screen and (min-width: 320px) {
.priority-images {
width: 90% important;
background: green;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="priority-images">
There are no accidents ... No there are not !!!
</article>
</body>
<script src="./script.js"></script>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句