-
rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進(jìn)行計算,rem是相對于根元素html的font-size進(jìn)行計算,這樣一來rem就繞開了復(fù)雜的層級關(guān)系，實現(xiàn)了類似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem查看全部
-
的負(fù)擔(dān)復(fù)旦反對反對法地方查看全部
-
對于background-position-x: x;和background-position-y: y;而言，在Firefox和IE中是不支持的，需使用標(biāo)準(zhǔn)書寫方式：background-position: x y; 對于steps(counts,end/start)函數(shù)，此函數(shù)作用于animation-name中動畫函數(shù)的相鄰兩個狀態(tài)之間，將兩個狀態(tài)之前拆分成counts個幀，因此使用steps()是和animation-name中的對應(yīng)為：如果animation-name函數(shù)中的狀態(tài)為始末兩種，則使用counts>1,將始末兩個狀態(tài)拆分成需要的個數(shù)；如果animation-name函數(shù)中的狀態(tài)為多于始末兩個狀態(tài)時，則counts=1，不進(jìn)行拆分；查看全部
-
背景用%查看全部
-
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, //當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時， //注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。 //總來的來就是監(jiān)聽當(dāng)然窗口的變化，一旦有變化就需要重新設(shè)置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = ? }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>查看全部
-
技術(shù)分解查看全部
-
參考右邊代碼區(qū)域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監(jiān)聽瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';查看全部
-
參考右邊代碼區(qū)域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監(jiān)聽瀏覽器更改 html的font-size查看全部
-
h5查看全部
-
設(shè)置3d效果需要在父元素上設(shè)置transform-style:preserve-3d;這樣子元素才擁有了3d效果，如果孫元素也要有那么需要在子元素上也設(shè)置此屬性。 父元素設(shè)置perspective:length屬性之后子元素才可以看到三維視覺 最后需要在子元素上設(shè)置x/y/z軸上的旋轉(zhuǎn)角度 transform:rotatex/y/z(number deg)查看全部
-
當(dāng)需要填充整個元素做背景動態(tài)圖的時候，使用background-size:100%會讓整個背景圖片填充，例如課程中的8個海盜船，但是如果將背景的大小按照比例百分比縮放background-size:xxx% xxx%那么就可以用background-size:100%來填充元素查看全部
-
理解steps(x)函數(shù)的意義，它是把每段變化過程分為x段執(zhí)行。例如課程中的0%-100%分為了三段，就可以正確的將雪碧圖中三個圖片展示出來查看全部
-
看看學(xué)習(xí)學(xué)習(xí)查看全部
-
.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
提交
取消