min-width媒体查询设置的flex-basis样式提前生效是否属于正常现象？

这个现象不属于预期内的正常表现，常见触发原因如下：

• 视口宽度包含滚动条宽度：CSS min-width 媒体查询统计的是浏览器完整视口的总宽度，包含垂直滚动条的占用宽度，Windows系统默认滚动条宽度约为17px。也就是说你看到的页面内容区域宽度刚到1182px左右时，加上滚动条的宽度整个视口已经达到1199px的触发条件，就会提前应用flex-basis: 25%的规则，macOS默认滚动条悬浮不占视口宽度，不会出现这个问题。
• 浏览器缩放比例异常：如果调整过页面缩放比例，缩放会改变视口逻辑宽度的计算结果，比如放大到110%时，实际物理宽度还没到1199px，逻辑宽度就已经满足触发条件。
• 多余语法错误干扰：你提供的CSS代码中，.portfolio 类定义结束后多了一个冗余的闭合大括号}，虽然主流浏览器都会自动忽略这类语法错误，但极端场景下可能影响样式优先级判断，建议删除冗余括号后再测试。

修复方案 #

• 可以适当调高宽屏断点的阈值，比如将min-width: 1199px调整为min-width: 1220px，抵消滚动条宽度的影响。
• 确认HTML头部已添加正确的viewport元标签，避免缩放、移动端场景下的宽度计算异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 若需要严格按照内容容器宽度触发断点，可使用CSS容器查询实现，注意提前确认业务兼容范围。

内容的提问来源于stack exchange，提问作者user15259381