Sass Chrome mobile emulator无法识别媒体查询

我正在尝试使用css和媒体查询创建一个网格系统。 目前，由于某些原因，当我手动更改窗口大小时，页面的css确实会发生变化，但我希望能够使用chrome emulator测试我的站点的响应能力。chrome emulator目前无法识别我的任何媒体查询。chrome开发工具中是否有一些设置我必须更改为chrome mobile emulator识别媒体查询？这可能是我不知道的一些古怪的言辞吗

这是我的代码，如果有帮助的话

HTML:

SCSS：

---

如果媒体查询在您不处于设备模式时工作（例如，当您减小浏览器窗口的宽度时，它们工作），那么这只是设备模式下的一个错误。我最近报告了类似的情况：

设备模式应该模拟页面在具有不同视口大小的不同设备上的外观。您不需要启用任何设置。

在

头部
标记中添加
标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

您尝试过“显示媒体查询”吗？Josh Lee这是一个很酷的功能，很高兴了解它，谢谢。当我在850px、450px和380px之间改变屏幕宽度时，CSS仍然没有改变
#grid > div {
  height: 25px;
  background: #ccc;
  border: 1px solid #aaa;
  box-sizing: border-box;
  float: left; }

#grid.cell-1 > div {
  width: 100%; }

#grid.cell-2 > div {
  width: 50%; }

#grid.cell-3 > div {
  width: 33.33333%; }

#grid.cell-4 > div {
  width: 25%; }

#grid.cell-5 > div {
  width: 20%; }

#grid.cell-6 > div {
  width: 16.66667%; }

#grid.cell-7 > div {
  width: 14.28571%; }

#grid.cell-8 > div {
  width: 12.5%; }

#grid.cell-9 > div {
  width: 11.11111%; }

#grid.cell-10 > div {
  width: 10%; }

#grid.cell-11 > div {
  width: 9.09091%; }

#grid.cell-12 > div {
  width: 8.33333%; }

#grid.cell-13 > div {
  width: 7.69231%; }

#grid.cell-14 > div {
  width: 7.14286%; }

#grid.cell-15 > div {
  width: 6.66667%; }

#grid.cell-16 > div {
  width: 6.25%; }

@media (max-width: 850px) {
  #grid.cell-850-1 > div {
    width: 100%; }

  #grid.cell-850-2 > div {
    width: 50%; }

  #grid.cell-850-3 > div {
    width: 33.33333%; }

  #grid.cell-850-4 > div {
    width: 25%; }

  #grid.cell-850-5 > div {
    width: 20%; }

  #grid.cell-850-6 > div {
    width: 16.66667%; }

  #grid.cell-850-7 > div {
    width: 14.28571%; }

  #grid.cell-850-8 > div {
    width: 12.5%; }

  #grid.cell-850-9 > div {
    width: 11.11111%; }

  #grid.cell-850-10 > div {
    width: 10%; }

  #grid.cell-850-11 > div {
    width: 9.09091%; }

  #grid.cell-850-12 > div {
    width: 8.33333%; } }
@media (max-width: 450px) {
  #grid.cell-450-1 > div {
    width: 100%; }

  #grid.cell-450-2 > div {
    width: 50%; }

  #grid.cell-450-3 > div {
    width: 33.33333%; }

  #grid.cell-450-4 > div {
    width: 25%; }

  #grid.cell-450-5 > div {
    width: 20%; }

  #grid.cell-450-6 > div {
    width: 16.66667%; } }
@media (max-width: 380px) {
  #grid.cell-380-1 > div {
    width: 100%; }

  #grid.cell-380-2 > div {
    width: 50%; }

  #grid.cell-380-3 > div {
    width: 33.33333%; } }

#grid > div {
   height: 25px;
   background: #ccc;
   border: 1px solid #aaa;
   box-sizing: border-box;
   float: left;
}

@for $i from 1 through 16 {

   $equ: 100% / $i ;

   #grid.cell-#{ $i } > div {
      width: $equ;
   }
}

$map: ( 850: 12, 450: 6, 380: 3);

@each $key, $val in $map {
  @media (max-width: $key + px){

    @for $i from 1 through $val {
       $equ: 100% / $i ;
       #grid.cell-#{ $key }-#{$i} > div {
          width: $equ;
       }
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />