Question

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

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

HTML：

pip install --no-index --find-links=~/wheels -r requirement.txt
pip install --no-index --find-links=~/wheels uwsgi

CSS：

<html>

   <head>
      <title>Sass Grid</title>
      <link rel="stylesheet" href="Grid.css"/>
   </head>

   <body>
      <div id="grid" class="cell-850-3 cell-450-2 cell-380-1 cell-16">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
      </div>
   </body>
</html>

SCSS：

#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%; } }

Answer 1

如果媒体查询在您未处于设备模式时正在工作（例如，当您减小浏览器窗口的宽度时它们正常工作）那么这只是设备模式中的一个错误。我最近报告了类似的内容：https://crbug.com/699246

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

Answer 2

在<meta>标记内添加head标记。

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

Chrome移动模拟器无法识别媒体查询

2 个答案: