CSS媒体查询与移动化 [英] CSS Media Query and Mobile
本文介绍了CSS媒体查询与移动化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试设置一个模型的不同维度。
如果我在浏览器中调整大小，更改就是我想要的。
但是，如果我更改Chrome以模拟移动环境，或者如果我在手机上打开代码，它不能工作。
在这个例子中，我尝试了一种移动优先方法。我的dialog-content默认为白色。然后，如果宽度大于750px，我将更改为蓝色；如果宽度大于1000px，我将更改为黑色。我还做了其他更改，但颜色是示例中最重要的一个。
我想知道为什么我的默认案例不适用于移动设备。
代码可以找到here。
推荐答案
尝试在文档的head中添加VIEPORTmeta标记：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
这篇关于CSS媒体查询与移动化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
