您好,登錄后才能下訂單哦!
怎么在移動端布局中實現(xiàn)動態(tài)rem?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
1. 首先我們先介紹當(dāng)下的長度單位
px
像素
em
一個M的寬度 / 一個漢字的寬度 1em == 自身的 font-size
rem
全稱 root em
是根元素(html)的 font-size
vh
全稱 viewport height
100vh == 視口高度
vw
全程 viewport width
100vw == 視口寬度
因為網(wǎng)頁的默認(rèn)font-size: 16px 所以1rem默認(rèn)是 16px chrome
的最小字體像素默認(rèn)是 12px
一個元素在沒有設(shè)置font-size的情況下會去繼承父元素的font-size
2. 移動端的布局
移動端的布局一般就兩種
一是整體縮放
二是百分比布局
先說整體縮放
整體縮放,其實就是將pc端的網(wǎng)頁縮小到手機端屏幕能看到網(wǎng)頁全貌的大小
蘋果手機剛出來時就是使用這種布局,蘋果公司研究發(fā)現(xiàn)世界上大多數(shù)的網(wǎng)頁寬度是980px,然而蘋果手機的寬度像素是320px,所以蘋果手機的瀏覽器用320像素的屏幕寬度去模擬980px的寬度,實現(xiàn)了整體縮放
為了看到效果,要將 <meta name="viewport">
這一部分刪除
<style> div{ width:980px; margin:0 auto; background:#f0f0f0; } ul{ list-style:none; } li{ float:left; margin-left:10px; } clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div> <ul> <li>選項1</li> <li>選項2</li> <li>選項3</li> <li>選項4</li> <li>選項5</li> <li>選項6</li> </ul> </div> </body>
但這種整體縮放的用戶體驗并不好,所以pass,我們來講百分比布局
百分比布局
//百分比布局 <style> .child{ background-color:#ccc; text-align:center; width:40%; margin:10px 5%; float:left; } .clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div class="parent clearfix"> <div class="child">選項1</div> <div class="child">選項2</div> <div class="child">選項3</div> <div class="child">選項4</div> </div> </body>
可以看到百分比布局能自動適應(yīng)屏幕寬度。
但是百分比布局有個缺點,寬度和高度不能做任何關(guān)聯(lián)
可以看上面的gif圖,寬度一直變長,然而高度沒有變化
為了讓選項方塊的高度是寬度的一半,實現(xiàn)該效果我們需要知道屏幕的寬度,再來確定選項的寬度和高度
這里可以使用vw,但vw的兼容性比較差,我們可以使用rem來代替vw
首先rem是以html的font-size為基準(zhǔn)的,所以我們可以讓html的font-size==pageWidth
<script> let pageWidth = window.innerWidth; document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>') </script>
為了更好的使用rem,這里1rem等于屏幕寬度的10分之1。注意不能做到1rem==屏幕的百分之1。因為瀏覽器的最小 font-size是12px
;
按如上改動代碼
<style> .child{ background-color:#ccc; text-align:center; width:4rem; height:2rem; margin:10px 0.05rem; float:left; line-height:2rem; } .clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div class="parent clearfix"> <div class="child">選項1</div> <div class="child">選項2</div> <div class="child">選項3</div> <div class="child">選項4</div> </div> </body>
效果入圖
可以看到寬度和高度都能按百分比變化了,但是我們會發(fā)現(xiàn)一個很麻煩的東西,設(shè)計師給我們的設(shè)計稿,我們卻必須把每個元素的像素單位換算為rem。這里我們就要scss來換算px了
3.scss動態(tài)換算px
@function pxToRem($px){ @return $px/$designWidth*10+rem;//10是把整個屏幕分為10rem } $designWidth:320;//設(shè)計稿寬度 .child{ background-color:#ccc; text-align:center; width:pxToRem(128);//4rem; height:pxToRem(64);//2rem; margin: 10px pxToRem(1.6); float:left; line-height:pxToRem(64); } .clearfix::after{ content:""; display:block; clear:both; }
關(guān)于怎么在移動端布局中實現(xiàn)動態(tài)rem問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。