基于 CSS3 Media Queries 的 HTML5 应用_皇冠新体育app官方平台入口

本文摘要：先来先容下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包罗了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表规模的表达式。

先来先容下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包罗了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表规模的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备规模。那么该怎么界说 media 呢，看下面的代码，你肯定能猜出个或许。

关于解释，文档中是这么说的，当媒体查询为真时，相关的样式表或样式规则就会根据正常的级联规则被应用。纵然媒体查询返回假， 标签上带有媒体查询的样式表仍将被下载（只不外不会被应用）。

所以呢，这也是一种毛病，如果说对某个页面界说了多个样式尺度来因对差别的 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 样式，详细的代码如下：

代码有了，那么要怎么测试呢？在一般情况下，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 更换一下位置，问题就顺利地解决了。以上是凭据差别的 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 中有一辆车凭据某条门路前行，当拖到另外一个屏幕的时候，换辆车子。

先来看看效果图：上面两张图划分是在差别的屏幕中的截图，车子动起来的效果可以会见以下链接： 以下是实验的详细代码： 来先容下这次 Demo 中都用到的了 HT for Web 的那些技术。首先是车子，车子并不是通过 HT for Web 生成的，而是通过专业的 3D 工具设计，然后导出 obj 和 mtl 文件，HT for Web 对 obj 和 mtl 文件举行剖析，然后显示在 Graph3dView 中，更多详细的先容可以查阅我么的 obj 文档在 obj 文档中，你会看到一个一个飞机的例子，飞机沿着设定好的门路航行，你应该会想，这个寻路是怎么实现的呢？其实很简朴，我们将门路切割成一个个很小很小的单元，然后凭据算法依次获取到小单元的坐标设置到移动的物体上，这样物体就动起来了。在 Demo 中，有一条很精致的马路，这条马路就是一个 Shape 节点，凭据车的路径生成的马路，Shape 是一个六面体，因为首尾相连了，所以没有左右面，在这个例子中，我将马路的 back 和 top 面隐藏了，然后 bottom 面支持翻转，让 bottom 面的贴图显示在内外貌上，这样马路就建成了。

本文关键词：皇冠新体育app官方平台入口

本文来源：皇冠新体育app官方平台入口-www.zghcjj.com