文档章节

实践 HTML5 的 CSS3 Media Queries

xhload3d
 xhload3d
发布于 2016/06/21 02:06
字数 2385
阅读 348
收藏 15

先来介绍下 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 属性值下,展现出不同的颜色,这是为什么呢?

这代码是我最开始写代码,运行后发现没效果,起初我也不知道原因,在跨屏拖动页面的时候,在浏览器控制台中,我找到了原因。那么到底是什么原因导致设置无效的呢?我们来看看两个屏幕下的 Style 内容截图,左边是 min-resolution 等于 1,右边是等于 2

       

对比着两个图,可以发现,在 min-resolution 等于 2 的情况下,在里面定义的属性被覆盖掉了,并没有生效,这是为什么呢?

要解释的话,这里恐怕需要补充一点知识,就是关于 min- 和 max- 的前缀,在代码中的所起到的具体效果,在文档中是这么描述的:大多数媒体属性带有 “min-” 和 “max-” 前缀,用于表达 “大于等于” 和 “小于等于”。这避免了使用与HTML和XML冲突的 “<” 和 “>” 字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。

其实上面的说明已经帮我解释清楚了,我再通俗地和大家解释一下:当 devicePixelRatio 为 1 时,只有 min-resolution: 1dppx 这个条件满足,因此 div 的颜色是黑色没错;当 devicePixelRatio 为 2 时,两个 media 都满足条件,同时 CSS 的规则是后加载的样式将会覆盖先加载的样式,由于我么将 min-resolution: 1dppx 的 media 写在后面,因此如果两个 media 都满足条件的话, min-resolution: 1dppx 的 media 将会覆盖 min-resolution: 2dppx 的 media,因此不管你把页面拖到那个屏幕,那个 div 的背景色都是黑色。

那么我们将两个 media 调换一下位置,问题就顺利地解决了。

<style media="screen">
    @media screen and (min-resolution: 1dppx) {
        #image {
            background: #000;
        }
    }
    @media screen and (min-resolution: 2dppx) {
        #image {
            background : red;
        }
    }
</style>

以上是根据不同的 media 条件设置不同的样式,这是 CSS 的做法,在 JavaScript 中,没有专门的方法来监听 window.devicePixelRatio 属性变化,那么该怎么监听 devicePixelRatio 属性的变化呢?方法也很简单,看看下面的代码,你一定就明白了:

window.matchMedia('screen and (min-resolution: 2dppx)').addListener(function(e) {
    console.info(e, window.devicePixelRatio);
});

稍微解释下,通过 window.matchMedia(‘media expression’) 方法获取到对应的 media,然后通过 addListener(function(e) {}) 来监听 media 的变化。

有玩过 Canvas 的朋友一定知道,要想绘制出来的内容效果最佳的话,Canvas 自身的 width 和 height 属性值与 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio 的值,所有如果你在切换不同 devicePixelRatio 属性值的屏幕时,没有重新设置 Canvas 的宽高的话,绘制出来的画面将不是最佳的效果。

接下来我们基于 HT for Web 的 3D 模型来做一个小实验。实验的内容是这样的,在 GraphView 中有一辆车根据某条路线前行,当拖到另外一个屏幕的时候,换辆车子。先来看看效果图:

上面两张图分别是在不同的屏幕中的截图,车子动起来的效果可以访问以下链接:

实验的地址是:http://www.hightopo.com/demo/media/index.html 以下是实验的具体代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HT for Web</title>
        <style media="screen">
            @media screen and (min-resolution: 2dppx) {}
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>
        <script src="../../oldhtforweb/lib/core/ht.js"></script>
        <script src="../../oldhtforweb/lib/plugin/ht-modeling.js"></script>
        <script src="../../oldhtforweb/lib/plugin/ht-obj.js"></script>
        <script>
            ht.Default.setImage('road', './images/road.jpg');
            var init = function() {
                g3d = new ht.graph3d.Graph3dView();
                var dm = g3d.dm();
                g3d.addToDOM();
                g3d.setEye(1200, 300, 0);
                g3d.getNote = function(data) {
                    if (data.getTag() !== 'carNode') return null;
                    return 'DevicePixelRatio : ' + window.devicePixelRatio;
                };

                var carIndex = 0;
                window.matchMedia('screen and (min-resolution: 2dppx)').addListener(function() {
                    carIndex = (carIndex + 1) % 2;
                    var obj = result[carIndex];
                    carNode.s('shape3d', obj.name);
                    ht.Default.setDevicePixelRatio();
                });

                var polyline = createPath(dm, 300),
                    params = {
                        delay: 0,
                        duration: 10000,
                        easing: function(t){
                            return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));
                        },
                        action: function(v, t){
                            var length = g3d.getLineLength(polyline);
                            var offset = g3d.getLineOffset(polyline, length * v),
                                point = offset.point,
                                px = point.x,
                                py = point.y,
                                pz = point.z,
                                tangent = offset.tangent,
                                tx = tangent.x,
                                ty = tangent.y,
                                tz = tangent.z;
                            carNode.p3(px, py - 9, pz);
                            carNode.lookAt([px + tx, py + ty - 9, pz + tz], 'front');
                        },
                        finishFunc: function(){
                            ht.Default.startAnim(params);
                        }
                    },
                    carList = [ 'fordFocus', 'concept-sedan-01v2'],
                    result = [], carNode = new ht.Node();
                carNode.setTag('carNode');
                carList.forEach(function(name, index) {
                    ht.Default.loadObj('./objs/'+name+'/'+name+'.obj', './objs/'+name+'/'+name+'.mtl', {
                        cube: true,
                        center: true,
                        shape3d: name,
                        finishFunc: function(modelMap, array, rawS3) {
                            var k = 110 / rawS3[0];
                            rawS3 = rawS3.map(function(v) { return v * k; });
                            result[index] = {
                                'name' : name,
                                'modelMap' : modelMap,
                                'array' : array,
                                'rawS3' : rawS3
                            };
                            if (index === 0) {
                                var node = carNode;
                                node.s({
                                    'wf.width' : 0,
                                    'shape3d' : name,
                                    'note.position' : 44,
                                    'note' : 'DevicePixelRatio : ' + window.devicePixelRatio,
                                    'note.face' : 'top',
                                    'note.autorotate' : true,
                                    'note.font' : '46px arial, sans-serif'
                                });
                                node.s3(rawS3);
                                node.r3(0, Math.PI, 0);
                                dm.add(node);
                                polyline.setElevation(rawS3[1] * 0.5 + 2);
                                ht.Default.startAnim(params);
                            }
                        }
                    });
                });
            };

            var createPath = function(dm, radius) {
                var polyline = new ht.Polyline();
                polyline.setThickness(2);

                polyline.s({
                    'shape.border.pattern': [16, 16],
                    'shape.border.color': 'rgba(0, 0, 0, 0)',
                    'shape3d.resolution': 300,
                    '3d.selectable': false
                });
                dm.add(polyline);

                var cx = 0,
                    cy = radius * Math.PI * 0.5,
                    count = 500,
                    points = [{ x: radius, y: -cy, e: 0 }],
                    segments = [1];
                for (var k = 0; k < count + 1; k++) {
                    var angle = k * Math.PI / count;
                    points.push({
                        x: cx + radius * Math.cos(angle),
                        y: cy + radius * Math.sin(angle),
                        e: 0
                    });
                    segments.push(2);
                }

                cy *= -1;
                radius *= -1;
                for (var k = 0; k < count + 1; k++) {
                    var angle = k * Math.PI / count;
                    points.push({
                        x: cx + radius * Math.cos(angle),
                        y: cy + radius * Math.sin(angle),
                        e: 0
                    });
                    segments.push(2);
                }

                polyline.setPoints(points);
                polyline.setSegments(segments);

                var shape = new ht.Shape();
                shape.setPoints(points);
                shape.setSegments(segments);
                shape.s({
                    'top.visible' : false,
                    'bottom.image' : 'road',
                    'bottom.reverse.flip' : true,
                    'bottom.uv.scale' : [13, 1],
                    'back.visible' : false,
                    'front.reverse.flip' : true,
                    '3d.selectable': false
                });
                shape.setThickness(180);
                shape.setTall(15);
                shape.setClosePath(true);
                dm.add(shape);

                return polyline;
            };
        </script>
    </head>
    <body onload="init();">
    </body>
</html>

来介绍下这次 Demo 中都用到的了 HT for Web 的那些技术。

首先是车子,车子并不是通过 HT for Web 生成的,而是通过专业的 3D 工具设计,然后导出 obj 和 mtl 文件,HT for Web 对 obj 和 mtl 文件进行解析,然后显示在 Graph3dView 中,更多具体的介绍可以查阅我么的 obj 文档:http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html

在 obj 文档中,你会看到一个一个飞机的例子,飞机沿着设定好的路线飞行,你应该会想,这个寻路是怎么实现的呢?其实很简单,我们将路线切割成一个个很小很小的单元,然后根据算法依次获取到小单元的坐标设置到移动的物体上,这样物体就动起来了。 

在 Demo 中,有一条很精致的马路,这条马路就是一个 Shape 节点,根据车的路径生成的马路,Shape 是一个六面体,因为首尾相连了,所以没有左右面,在这个例子中,我将马路的 back 和 top  面隐藏了,然后 bottom 面支持翻转,让 bottom 面的贴图显示在内表面上,这样马路就建成了。

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
xhload3d
粉丝 179
博文 156
码字总数 318723
作品 0
崇明
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac
2011/12/02
0
1
通过CSS3 Media Query实现响应式Web设计

OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例...

山哥
2012/02/28
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
『reprint』Pixel distortion

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现...

波利beryl
2014/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java程序员的书籍清单

我自己一路来,看过的书籍,都是经典,我自己也在不断地回溯,在这里分享给大家(排名不分先后,这里仅仅是我自己购买这些书籍的时间顺序排列): 《高效程序员的45个习惯 敏捷开发修炼之道》...

ChinaHYF
31分钟前
1
0
DeepMind 开源图神经网络的代码

用于支持论文《Relational inductive biases, deep learning, and graph networks》。 github A graph network takes a graph as input and returns a graph as output. The input graph has......

shengjuntu
53分钟前
2
0
python2编码详解、一

以前使用python3没觉的什么,跟着公司使用python2后被编码问题折磨的痛不欲生,好好研究了一下编码问题,参考了很多博文,加入自己的理解,这里只是对编码的介绍,下一篇是python2中编码问题...

hc321
今天
2
0
基于OpenSSL的一些常用加密签名算法

目前包括:MD5、SHA512、DES、RSA加解密、RSA+MD5签名验证算法,在openssl基础上再进行封装,使用简单,头文件需要包含openssl库,可以使用vcpkg自动管理,省去繁琐的配置工程的过程。 该RSA...

LoSingSang
今天
1
0
spring Data JPA

什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述【对象-关系表】之间的映射关系,并将实体对象持久化到数据库中。 为我们提供了: 1)ORM映射元数据:JPA支持XML和注解两种元...

狼王黄师傅
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部