首頁 web前端 H5教程 實踐HTML5的CSS3Media Queries的範例程式碼分享

實踐HTML5的CSS3Media Queries的範例程式碼分享

Mar 28, 2017 pm 03:21 PM

先介紹下media,確切的說法應該是CSS media queries(CSS 媒體查詢),媒體查詢包含了一個媒體類型和至少一個使用如寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。怎麼定義media 呢,看下面的程式碼,你一定能猜出個大概。樣式表或樣式規則就會依照正常的級聯規則被套用。 #所以呢,這也是一種弊端,如果說對某個頁面定義了多個樣式標準來因對不同的media 屬性的話,那在頁面的載入時間將會受到影響,但是話有說回來,在當前網路快速發展的時代,網速也在不斷地完善和提高,因此影響並不大,幾乎可以忽略不計。可以用邏輯

運算子

(and、not、only 等)來組成media 表達式,書寫更複雜的篩選條件,這些表達式我就不再這邊一一說明了,

接下來我們來用幾個Demo 來示範下media 的用法及表現。 ,那麼我們就以在不同的devicePixelRatio 值情況下,來改變某個p 的background 樣式,具體的代碼如下:

1

2

3

4

5

6

7

8

9

<!-- link元素中的CSS媒体查询 -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

 

<!-- 样式表中的CSS媒体查询 -->

<style>@media (max-width: 600px) {

  .facet_sidebar {

    display: none;

  }

}</style>

登入後複製
代碼有了,那麼要怎麼測試呢?一樣的,那麼恭喜你,你已經具備測試條件,只需要將頁面從一個屏拖到另外一個屏,這樣你就可以看到效果了。的同學會發現,p 的背景色並沒有想程式碼中設定的那樣,在不同的devicePixelRatio 屬性值下,展現出不同的顏色,這是為什麼呢?

這程式碼是我最開始寫程式碼,運行後發現沒效果,起初我也不知道原因,在跨螢幕拖曳頁面的時候,在瀏覽器控制台中,我找到了原因。那麼到底是什麼原因導致設定無效的呢?我們來看看兩個畫面下的Style 內容截圖,左邊是min-resolution 等於1,右邊是等於2

       

#對比兩個圖,可以發現,在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 调换一下位置,问题就顺利地解决了。

1

2

3

4

5

6

7

8

9

10

11

<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 属性的变化呢?方法也很简单,看看下面的代码,你一定就明白了:

1

2

3

window.matchMedia(&#39;screen and (min-resolution: 2dppx)&#39;).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 中有一辆车根据某条路线前行,当拖到另外一个屏幕的时候,换辆车子。先来看看效果图:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

<!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(&#39;road&#39;, &#39;./images/road.jpg&#39;);           

            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() !== &#39;carNode&#39;) return null;                   

                return &#39;DevicePixelRatio : &#39; + window.devicePixelRatio;

                };               

                var carIndex = 0;

                window.matchMedia(&#39;screen and (min-resolution: 2dppx)&#39;).addListener(function() {

                    carIndex = (carIndex + 1) % 2;                   

                    var obj = result[carIndex];

                    carNode.s(&#39;shape3d&#39;, 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], &#39;front&#39;);

                        },

                        finishFunc: function(){

                            ht.Default.startAnim(params);

                        }

                    },

                    carList = [ &#39;fordFocus&#39;, &#39;concept-sedan-01v2&#39;],

                    result = [], carNode = new ht.Node();

                carNode.setTag(&#39;carNode&#39;);

                carList.forEach(function(name, index) {

                    ht.Default.loadObj(&#39;./objs/&#39;+name+&#39;/&#39;+name+&#39;.obj&#39;, &#39;./objs/&#39;+name+&#39;/&#39;+name+&#39;.mtl&#39;, {

                        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] = {                               

                            &#39;name&#39; : name,                               

                            &#39;modelMap&#39; : modelMap,                               

                            &#39;array&#39; : array,                               

                            &#39;rawS3&#39; : rawS3

                            };                           

                            if (index === 0) {                               

                            var node = carNode;

                                node.s({                                   

                                &#39;wf.width&#39; : 0,                                   

                                &#39;shape3d&#39; : name,                                  

                                 &#39;note.position&#39; : 44,                                   

                                 &#39;note&#39; : &#39;DevicePixelRatio : &#39; + window.devicePixelRatio,    

                                 &#39;note.face&#39; : &#39;top&#39;,                                   

                                 &#39;note.autorotate&#39; : true,                           

                                  &#39;note.font&#39; : &#39;46px arial, sans-serif&#39;

                                });

                                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({                   

                &#39;shape.border.pattern&#39;: [16, 16],                   

                &#39;shape.border.color&#39;: &#39;rgba(0, 0, 0, 0)&#39;,                   

                &#39;shape3d.resolution&#39;: 300,                   

                &#39;3d.selectable&#39;: 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({                   

                &#39;top.visible&#39; : false,                   

                &#39;bottom.image&#39; : &#39;road&#39;,                   

                &#39;bottom.reverse.flip&#39; : true,                   

                &#39;bottom.uv.scale&#39; : [13, 1],                   

                &#39;back.visible&#39; : false,                   

                &#39;front.reverse.flip&#39; : true,                   

                &#39;3d.selectable&#39;: 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>掩蓋:探險33-如何獲得完美的色度催化劑
2 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1677
14
CakePHP 教程
1430
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles