如何在MUI4类中用单条媒体查询实现350-565px区间响应式边距

你原有代码的生效逻辑是靠CSS同优先级规则后写覆盖的规则实现的：视口宽度≤350px时两条max-width规则同时命中，后定义的max-width:350px规则会把marginTop重置为0；视口宽度在351px-565px区间时只有第一条规则命中，marginTop为8；视口宽度大于565px时无额外上边距。

要把原来依赖覆盖的两条max-width规则改成单条媒体查询直接命中350px-565px区间，只需要用and拼接宽度上下限条件即可，不需要额外写覆盖规则。如果你的view类默认没有设置其他marginTop（默认值即为0），可以直接简化为如下写法：

view: {
  display: 'flex',
  justifyContent: 'center',
  flexWrap: 'wrap',
  alignItems: 'center',
  // 单条媒体查询匹配351px-565px视口区间，直接应用目标样式
  ['@media (min-width: 351px) and (max-width: 565px)']: {
    marginTop: 8,
  }
}

写法说明 #

• 上述写法完全对齐你原有代码的样式表现，没有冗余的覆盖逻辑，代码可读性更高，生成的CSS体积也更小。
• 如果你需要让350px宽度端点也命中marginTop:8的规则，只需要把min-width值调整为350px即可，对应媒体查询为@media (min-width: 350px) and (max-width: 565px)，可以根据实际的端点需求调整。
• 如果你的项目构建链路已经支持CSS Media Queries Level 4语法，也可以写成更符合直觉的范围比较形式：@media (350px < width <= 565px)，效果和min/max拼接写法完全一致。

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