CSS媒体查询与移动化

CSS Media Query and Mobile(CSS媒体查询与移动化)
本文介绍了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媒体查询与移动化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
Only transition a transform in css?(是否仅在css中转换转换?)
CSS transform doesn#39;t change CSS layout(Css转换不会更改css布局)