-
圣誕項(xiàng)目涉及技術(shù)1查看全部
-
圣誕項(xiàng)目涉及技術(shù)查看全部
-
rem查看全部
-
CSS3的Animation有八個(gè)屬性 animation-name ：動(dòng)畫(huà)名 animation-duration：時(shí)間 animation-delay：延時(shí) animation-iteration-count：次數(shù) animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態(tài) animation-timing-function：關(guān)鍵幀變化查看全部
-
rem和em單位一樣，都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來(lái)rem就繞開(kāi)了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類(lèi)似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem查看全部
-
CSS3的Animation有八個(gè)屬性 1.animation-name ：動(dòng)畫(huà)名 2.animation-duration：時(shí)間 3.animation-delay：延時(shí) 4.animation-iteration-count：次數(shù) 5.animation-direction：方向 6.animation-play-state：控制 7.animation-fill-mode：狀態(tài) 8.animation-timing-function：關(guān)鍵幀變化查看全部
-
技術(shù)分解查看全部
-
自適應(yīng)rem布局 rem是個(gè)低調(diào)的css單位，手淘在移動(dòng)端的布局是基于rem處理的，當(dāng)然還要基于viewport的處理，這里暫且不表。在我的上個(gè)七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來(lái)固定住)。如果使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì) % 百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。 因?yàn)閑m是相對(duì)父級(jí)元素的原因 沒(méi)有得到推廣，圣誕主題采用rem布局單位 rem是什么？ rem和em單位一樣，都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來(lái)rem就繞開(kāi)了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類(lèi)似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem 自適應(yīng)處理： 使用rem布局的時(shí)候,為了兼容不同的分辨率,我們應(yīng)該要?jiǎng)討B(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達(dá)到自適應(yīng)的效果 參考右邊代碼區(qū)域，一般情況在項(xiàng)目的最前面加載一段js來(lái)修改html的font-size，針對(duì)不同分辨率計(jì)算font-size，監(jiān)聽(tīng)瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 給html設(shè)置fontSize大小，其實(shí)就是在DOMContentLoaded或者resize變化后調(diào)整fontSize的大小，從而調(diào)整rem的比值關(guān)系。慕課的布局是右邊區(qū)域展示，所以按照移動(dòng)端的320寬度為標(biāo)準(zhǔn)去做適配的，當(dāng)然基于這個(gè)縮放都是沒(méi)關(guān)系的 總結(jié)： 根據(jù)實(shí)際情況通過(guò)設(shè)計(jì)稿與當(dāng)前可視區(qū)的大小做一個(gè)比例關(guān)系，通過(guò)這個(gè)比例進(jìn)行縮放處理查看全部
-
加油，圣誕之前學(xué)完查看全部
-
我查看全部
-
ctx.stroke(); //描邊 ctx,strokeStyle = "red"; ctx,strokeRect(10,10,100,190); ctx.fill(); //填充 ctx,fillStyle = "blue"; ctx,fillRect(110,110,100,190);查看全部
-
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; //給html設(shè)置fontSize 的大小查看全部
-
自適應(yīng)rem布局 rem是個(gè)低調(diào)的css單位，手淘在移動(dòng)端的布局是基于rem處理的，當(dāng)然還要基于viewport的處理，這里暫且不表。在我的上個(gè)七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來(lái)固定住)。如果使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì) % 百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。 因?yàn)閑m是相對(duì)父級(jí)元素的原因 沒(méi)有得到推廣，圣誕主題采用rem布局單位 rem是什么？ rem和em單位一樣，都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來(lái)rem就繞開(kāi)了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類(lèi)似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem 自適應(yīng)處理： 使用rem布局的時(shí)候,為了兼容不同的分辨率,我們應(yīng)該要?jiǎng)討B(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達(dá)到自適應(yīng)的效果 參考右邊代碼區(qū)域，一般情況在項(xiàng)目的最前面加載一段js來(lái)修改html的font-size，針對(duì)不同分辨率計(jì)算font-size，監(jiān)聽(tīng)瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 給html設(shè)置fontSize大小，其實(shí)就是在DOMContentLoaded或者resize變化后調(diào)整fontSize的大小，從而調(diào)整rem的比值關(guān)系。慕課的布局是右邊區(qū)域展示，所以按照移動(dòng)端的320寬度為標(biāo)準(zhǔn)去做適配的，當(dāng)然基于這個(gè)縮放都是沒(méi)關(guān)系的 總結(jié)： 根據(jù)實(shí)際情況通過(guò)設(shè)計(jì)稿與當(dāng)前可視區(qū)的大小做一個(gè)比例關(guān)系，通過(guò)這個(gè)比例進(jìn)行縮放處理查看全部
-
rem布局是根據(jù)html中的font-size大小來(lái)自適應(yīng)的，em根據(jù)什么來(lái)布局。他們的區(qū)別又是什么查看全部
-
<script type="text/javascript"> var docEl = document.documentElement, //當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時(shí)， //注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時(shí)候我們綁定了resize 事件。 //總來(lái)的來(lái)就是監(jiān)聽(tīng)當(dāng)然窗口的變化，一旦有變化就需要重新設(shè)置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
舉報(bào)
0/150
提交
取消