先介紹下media,確切的說法應該是CSS media queries(CSS 媒體查詢),媒體查詢包含了一個媒體類型和至少一個使用如寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。怎麼定義media 呢,看下面的程式碼,你一定能猜出個大概。樣式表或樣式規則就會依照正常的級聯規則被套用。 #所以呢,這也是一種弊端,如果說對某個頁面定義了多個樣式標準來因對不同的media 屬性的話,那在頁面的載入時間將會受到影響,但是話有說回來,在當前網路快速發展的時代,網速也在不斷地完善和提高,因此影響並不大,幾乎可以忽略不計。可以用邏輯
運算子(and、not、only 等)來組成media 表達式,書寫更複雜的篩選條件,這些表達式我就不再這邊一一說明了,
接下來我們來用幾個Demo 來示範下media 的用法及表現。 ,那麼我們就以在不同的devicePixelRatio 值情況下,來改變某個p 的background 樣式,具體的代碼如下:
<!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style>@media (max-width: 600px) { .facet_sidebar { display: none; } }</style>
#對比兩個圖,可以發現,在min-resolution 等於2 的情況下,在裡面定義的屬性被覆蓋掉了,並沒有生效,這是為什麼呢?
要解釋的話,這裡恐怕需要補充一點知識,就是關於min- 和max- 的前綴,在程式碼中的所起到的具體效果,在文檔中是這麼描述的:大多數媒體屬性帶有“min-” 和“max-” 前綴,用於表達“大於等於” 和“小於等於”。這避免了使用與HTML和XML衝突的 “<” 和 “>” 字元。如果你未向媒體屬性指定一個值,且該特性的實際值不為零,則該表達式被解析為真。如果瀏覽器運行的設備上沒有該屬性值,則包含這個屬性值的表達式一般會傳回假。
其实上面的说明已经帮我解释清楚了,我再通俗地和大家解释一下:当 devicePixelRatio 为 1 时,只有 min-resolution: 1dppx 这个条件满足,因此 p 的颜色是黑色没错;当 devicePixelRatio 为 2 时,两个 media 都满足条件,同时 CSS 的规则是后加载的样式将会覆盖先加载的样式,由于我么将 min-resolution: 1dppx 的 media 写在后面,因此如果两个 media 都满足条件的话, min-resolution: 1dppx 的 media 将会覆盖 min-resolution: 2dppx 的 media,因此不管你把页面拖到那个屏幕,那个 p 的背景色都是黑色。
那么我们将两个 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 中有一辆车根据某条路线前行,当拖到另外一个屏幕的时候,换辆车子。先来看看效果图:
上面两张图分别是在不同的屏幕中的截图,车子动起来的效果可以访问以下链接:
<!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 文档中,你会看到一个一个飞机的例子,飞机沿着设定好的路线飞行,你应该会想,这个寻路是怎么实现的呢?其实很简单,我们将路线切割成一个个很小很小的单元,然后根据算法依次获取到小单元的坐标设置到移动的物体上,这样物体就动起来了。
在 Demo 中,有一条很精致的马路,这条马路就是一个 Shape 节点,根据车的路径生成的马路,Shape 是一个六面体,因为首尾相连了,所以没有左右面,在这个例子中,我将马路的 back 和 top 面隐藏了,然后 bottom 面支持翻转,让 bottom 面的贴图显示在内表面上,这样马路就建成了。
以上是實踐HTML5的CSS3Media Queries的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!