在MediaQuery中，元素在达到一定宽度之前具有我们为其设置的特定属性，这是正常的吗？
提问于 2021-09-08 08:10:30
我设置了flex- have :宽度从767px到1199px的屏幕: 50%，宽度从1199px到1199px以上的屏幕: 25%，但我注意到在我们使用宽度为1199px的屏幕之前，flex-have等于25%，尽管我在宽度为1199px的屏幕上设置了flex-have: 25% (见图)。这是正常的吗？查看此图片以获取更多说明：The picture这是使用的代码：
.portfolio {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
}
.portfolio .imgs-container {
display: flex;
flex-wrap: wrap;
margin-top: 60px;
}
@media (min-width: 768px) {
.portfolio .imgs-container .box {
flex-basis: 50%;
}
}
@media (min-width: 1199px) {
.portfolio .imgs-container .box {
flex-basis: 25%;
}
}
.portfolio .imgs-container .box img {
max-width: 100%;
}<div class="portfolio">
<div class="imgs-container">
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2021-09-08 08:58:20
在设置媒体查询时，请尝试更具体...
@media screen and (min-width: 768px) and (max-width: 1198px) {
.portfolio .imgs-container .box {
flex-basis: 50%;
}
}
@media screen and (min-width: 1199px) {
.portfolio .imgs-container .box {
flex-basis: 25%;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69106456
复制相关文章
点击加载更多
腾讯云开发者
