本文介绍了CSS3 Media Queries的使用，特别是在响应式设计中的实践，通过示例展示了如何根据不同devicePixelRatio改变元素样式。文章详细解释了min-resolution属性的工作原理，并提供了解决样式覆盖问题的方案。此外，还讨论了在JavaScript中监听devicePixelRatio变化的方法，以及在HT for Web中创建3D模型响应式场景的应用。
先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
关于解释，文档中是这么说的，当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。
所以呢，这也是一种弊端，如果说对某个页面定义了多个样式标准来因对不同的 media 属性的话，那在页面的加载时间将会受到影响，但是话有说回来，在当前网络快速发展的时代，网速也在不断地完善和提高，因此影响并不大，几乎可以忽略不计。
media 还可以通过逻辑操作符（and、not、only 等）来组成 media 表达式，书写更复杂的过滤条件，这些表达式我就不再这边一一说明了，想深入了解的同学，可以阅读相关的说明文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 这里面有做详细的介绍。
接下来我们来用几个 Demo 来演示下 media 的用法及表现。
既然我们今天的目的是探讨如何监听 devicePixelRatio 属性的变化，那么我们就以在不同的 devicePixelRatio 值情况下，来改变某个 div 的 background 样式，具体的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@media screen and (min-resolution: 2dppx) {
#image {
background : red;
}
}
@media screen and (min-resolution: 1dppx) {
#image {
background: #000;
}
}
</style>
</head>
<body>
<div id="image" style="width:100px; height:100px"></div>
</body>
</html>
代码有了，那么要怎么测试呢？在一般情况下，devicePixelRatio 属相是不会变化的，但是肯定会存在特殊情况的，就比如说，你的电脑接了两个显示器，而且两台浏览器的 devicePixelRatio 属性是不一样的，那么恭喜你，你已经具备测试条件，只需要将页面从一个屏拖到另外一个屏，这样你就可以看到效果了。
有去测试的同学会发现，div 的背景色并没有想代码中设置的那样，在不同的 devicePixelRatio 属性值下，展现出不同的颜色，这是为什么呢？
这代码是我最开始写代码，运行后发现没效果，起初我也不知道原因，在跨屏拖动页面的时候，
最低0.47元/天 解锁文章
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
