媒体查询中min-inline-size未像min-width一样生效是否为支持度问题

原因分析 #

你遇到的是媒体查询逻辑属性的兼容性差异问题，和你写的规则语法无关：

• 普通CSS样式规则里的min-inline-size这类逻辑属性支持度更高：Chrome 87、Firefox 66、Safari 14.1就已经完成适配，所以你在选择器样式体内使用时可以正常生效。
• 媒体查询规则中对逻辑属性的支持落地时间晚很多：Chrome从104版本才开始支持媒体查询中的min-inline-size、max-inline-size等逻辑属性，Firefox支持版本为102，Safari更是到17版本才完成适配。如果你测试使用的浏览器版本低于上述要求，@media里的min-inline-size规则会被浏览器判定为无效语法，直接忽略，这就是你替换为min-width后就能正常生效的原因。

兼容方案 #

如果你需要覆盖大部分在役的低版本浏览器，现阶段媒体查询部分优先使用min-width/max-width、min-height/max-height这类物理尺寸属性即可，和样式体内的逻辑属性混用不会产生冲突。

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