谷歌Chrome切换设备工具栏模式下@media规则不生效问题咨询

• 首先检查页面head中是否添加了viewport元标签
  绝大多数设备模拟器下媒体查询失效、和手动缩小窗口表现不一致的问题都是缺失这行代码导致的，你需要在HTML的<head>标签内添加如下配置：

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

没有这行配置时，Chrome设备模拟器会默认对页面进行缩放适配，实际视口宽度和你看到的模拟器窗口宽度不匹配，而手动缩小桌面窗口时走的是桌面端视口逻辑，所以表现不一致。

• 排查rem单位的换算基准是否变化
  你写的媒体查询阈值用的是rem单位，rem是相对于<html>根元素的font-size属性计算的：

  • 先确认你是否在全局给html设置了固定的font-size，比如html { font-size: 16px; }，如果没有设置，浏览器默认根字体可能会根据设备类型调整，导致60rem对应的实际像素值在桌面端和模拟器端不一样
  • 如果你希望媒体查询阈值不受根字体影响，可以直接把阈值改成px单位，比如max-width: 960px（按16px根字体换算60rem就是960px），可以快速排除单位换算问题。

• 检查模拟器配置是否正确
  打开Chrome设备工具栏后，确认顶部的缩放比例设置为100%，同时没有开启自动调整缩放类的选项，也可以点击工具栏右侧的三个点，选择重置模拟器设置后再重试。

• 验证媒体查询优先级
  按F12打开元素检查器，选中.shop元素，查看样式面板中是否你的媒体查询规则被其他优先级更高的规则覆盖，如果有覆盖的情况可以给规则加权重或者调整代码顺序。

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