在MediaQuery中，元素在达到该宽度之前具有我们为其设置的特定属性是否正常?

Question

对于宽度从767px到1199px的屏幕，我设置flex- base: 50%，对于宽度从1199px到以上的屏幕，flex- base: 25%，但我注意到，在我们得到宽度为1199px的屏幕之前，flex- base等于25%，尽管我在宽度为1199px的屏幕上设置flex- base: 25%(见图)。这正常吗?请看这张图片了解更多:图片下面是使用的代码:

.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>

注意:感谢每个人的回答，我终于明白为什么会发生这种情况。

Answer 1

在设置媒体查询时尽量更具体…

@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%;
}
}