为何第二个Media Query在Chrome中无法将宽度设为100%？

这不是Chrome的问题，核心原因及解决方法如下：

1. 缺失视口元标签（最可能的原因） #

你的HTML里没有添加视口元标签，导致Chrome在移动设备或开发者工具的设备模拟模式下，默认使用980px的缩放视口，而非设备实际宽度。这种情况下，即使你把浏览器窗口拉到600px以下，@media(max-width:600px)的媒体查询也可能不会被正确触发，所以width:100%的设置不生效。

而W3S编辑器会自动为测试页面添加这个标签，所以能正常生效。

解决办法：在HTML的<head>标签内添加：

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

2. Chrome缓存了旧CSS文件 #

Chrome可能缓存了之前的CSS版本，新的媒体查询规则没被加载。

解决办法：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存。
• 或者在Chrome开发者工具的Network面板勾选Disable cache，再刷新测试。

3. 提升选择器优先级（备用方案） #

如果以上方法都无效，可以提高@media(max-width:600px)中规则的优先级，确保覆盖之前的设置：

@media(max-width: 600px) {
  header #chk1:checked~ul,
  header ul {
    width: 100%;
  }
}

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