CSS 媒体查询和移动

Question

我正在尝试制作一种模态的不同维度。

如果我在浏览器中调整大小，更改就是我想要的。

但是，如果我更改 Chrome 以模拟移动环境，或者如果我在 phone 上打开代码，它就不起作用。

我在示例中尝试采用移动设备优先的方法。我的 dialog-content 默认是白色的。然后如果宽度大于 750px 则变为蓝色，如果宽度大于 1000px 则变为黑色。我也做了其他更改，但颜色是示例中的重要更改。

我想知道为什么我的“默认”保护壳不适用于移动设备。

可以找到代码here。

Answer 1

尝试在文档的 head 中添加视口 meta 标签：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
     <!-- ... -->
  </body>
</html>

CSS Media Query and Mobile