如何测试宽度小于500px的CSS？媒体查询顺序是否有影响？

一、测试宽度小于500px的CSS样式方法 #

你当前用Chrome DevTools将Dimensions设为Responsive、手动输入480px及以下宽度的方法完全有效，再补充几个实用技巧：

• 直接在DevTools的设备工具栏（顶部手机图标）选择预设小屏设备，比如iPhone SE（375px宽）、Pixel 5（393px宽），这些设备宽度都小于500px，能快速模拟真实场景。
• 测试你提供的这段样式时：

  @media only screen and (max-width: 480px) {
      #globalnav-bag .ac-bag-flyout-container .ac-gn-bagview-button {
          width: 100%
      }
  }
  

  设置好目标宽度后，可在Elements面板选中对应按钮元素，查看Styles面板里是否加载了这个width:100%规则；也可以用Coverage工具确认该CSS规则是否被标记为「已使用」，以此验证样式是否生效。
• 用快捷键Ctrl+Shift+M（Windows/Linux）或Cmd+Shift+M（Mac）可快速切换到响应式测试模式，提升效率。

二、媒体查询书写顺序对样式应用的影响 #

会直接影响最终生效的样式，因为CSS遵循「层叠优先级」规则：当多个媒体查询同时匹配当前视口尺寸，且选择器优先级相同时，后声明的样式会覆盖先声明的。

结合你给出的媒体查询列表分析：

• 当视口宽度为400px时，max-width:480px、max-width:640px、max-width:734px、max-width:833px、max-width:1068px这些查询都会匹配。如果这些媒体查询中存在相同选择器的样式，后面的规则会覆盖前面的。比如若max-width:640px里也有#globalnav-bag .ac-bag-flyout-container .ac-gn-bagview-button的宽度设置，它会覆盖你写在max-width:480px里的width:100%。
• 列表里还有几个无效的媒体查询：
  • min-width:834px and max-width:833px：逻辑矛盾，没有任何视口尺寸能同时满足≥834px且≤833px，这个查询永远不会生效。
  • min-width:834px and min-width:834px：重复条件，等价于min-width:834px，属于冗余代码。

建议按「移动优先」或「桌面优先」的逻辑组织媒体查询：

• 移动优先：先写无媒体查询的移动端基础样式，再按从小到大的顺序写min-width:xxx的大屏适配样式。
• 桌面优先：先写无媒体查询的桌面端基础样式，再按从大到小的顺序写max-width:xxx的小屏适配样式。
  这样能避免样式被意外覆盖，让代码逻辑更清晰。

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