-
rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem查看全部
-
的負擔復旦反對反對法地方查看全部
-
對于background-position-x: x;和background-position-y: y;而言，在Firefox和IE中是不支持的，需使用標準書寫方式：background-position: x y; 對于steps(counts,end/start)函數，此函數作用于animation-name中動畫函數的相鄰兩個狀態之間，將兩個狀態之前拆分成counts個幀，因此使用steps()是和animation-name中的對應為：如果animation-name函數中的狀態為始末兩種，則使用counts>1,將始末兩個狀態拆分成需要的個數；如果animation-name函數中的狀態為多于始末兩個狀態時，則counts=1，不進行拆分；查看全部
-
背景用%查看全部
-
rem跟著屏幕增縮變化： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣誕主題</title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <body> <section> <div class="page">rem跟著html:font-size變化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時， //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。 //總來的來就是監聽當然窗口的變化，一旦有變化就需要重新設置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設置根字體大小 docEl.style.fontSize = ? }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>查看全部
-
技術分解查看全部
-
參考右邊代碼區域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監聽瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';查看全部
-
參考右邊代碼區域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監聽瀏覽器更改 html的font-size查看全部
-
h5查看全部
-
設置3d效果需要在父元素上設置transform-style:preserve-3d;這樣子元素才擁有了3d效果，如果孫元素也要有那么需要在子元素上也設置此屬性。 父元素設置perspective:length屬性之后子元素才可以看到三維視覺 最后需要在子元素上設置x/y/z軸上的旋轉角度 transform:rotatex/y/z(number deg)查看全部
-
當需要填充整個元素做背景動態圖的時候，使用background-size:100%會讓整個背景圖片填充，例如課程中的8個海盜船，但是如果將背景的大小按照比例百分比縮放background-size:xxx% xxx%那么就可以用background-size:100%來填充元素查看全部
-
理解steps(x)函數的意義，它是把每段變化過程分為x段執行。例如課程中的0%-100%分為了三段，就可以正確的將雪碧圖中三個圖片展示出來查看全部
-
看看學習學習查看全部
-
.container { position: relative; -webkit-perspective: 700px; -webkit-transform-style: preserve-3d; -moz-perspective: 700px; -moz-transform-style: preserve-3d; } #card { width: 100%; height: 100%; position: absolute; background-color: red; transform: rotateY(70deg); transform-style:preserve-3d; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(70deg); -webkit-transform-style: preserve-3d; }查看全部
-
背景圖等比縮放，那么背景定位也要等比去寫查看全部
舉報
0/150
提交
取消