CSS Media Query移动端不生效 模态框响应式适配异常问题

问题根因 #

你遇到的样式不生效问题是因为缺失移动端适配必备的viewport元标签：

• 移动端浏览器默认会使用宽度为980px左右的虚拟视口渲染页面，模拟桌面端显示效果，此时你设置的min-width: 750px媒体查询会被直接触发，自然不会应用移动端默认的白色dialog-content样式。
• 桌面端调整窗口大小时用的是真实的视口宽度，所以样式表现符合预期。

修复方案 #

在HTML的<head>标签内添加如下代码即可：

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

这行配置会强制让页面视口宽度和设备实际物理屏幕宽度保持一致，不做默认缩放，添加后你的媒体查询规则就能在移动端环境正常触发，和桌面端拖拽窗口的表现完全一致。

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