CSS 媒体查询和移动

Posted 2023-03-06

技术标签:

【中文标题】CSS 媒体查询和移动【英文标题】：CSS Media Query and Mobile 【发布时间】：2021-12-09 20:30:52 【问题描述】：

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

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

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

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

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

代码可以在here找到。

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

以上是关于CSS 媒体查询和移动的主要内容，如果未能解决你的问题，请参考以下文章