真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem

怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

鼓樓ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

1. 首先我們先介紹當(dāng)下的長(zhǎng)度單位

px 像素

em 一個(gè)M的寬度 / 一個(gè)漢字的寬度 1em == 自身的 font-size

rem 全稱 root em 是根元素（html)的 font-size

vh 全稱 viewport height 100vh == 視口高度

vw 全程 viewport width 100vw == 視口寬度

因?yàn)榫W(wǎng)頁(yè)的默認(rèn)font-size： 16px所以1rem默認(rèn)是 16pxchrome 的最小字體像素默認(rèn)是 12px

一個(gè)元素在沒有設(shè)置font-size的情況下會(huì)去繼承父元素的font-size

2. 移動(dòng)端的布局

移動(dòng)端的布局一般就兩種

一是整體縮放
二是百分比布局

先說整體縮放

整體縮放，其實(shí)就是將pc端的網(wǎng)頁(yè)縮小到手機(jī)端屏幕能看到網(wǎng)頁(yè)全貌的大小

蘋果手機(jī)剛出來(lái)時(shí)就是使用這種布局，蘋果公司研究發(fā)現(xiàn)世界上大多數(shù)的網(wǎng)頁(yè)寬度是980px，然而蘋果手機(jī)的寬度像素是320px，所以蘋果手機(jī)的瀏覽器用320像素的屏幕寬度去模擬980px的寬度，實(shí)現(xiàn)了整體縮放

為了看到效果，要將這一部分刪除

 


    
        
            選項(xiàng)1
            選項(xiàng)2
            選項(xiàng)3
            選項(xiàng)4
            選項(xiàng)5
            選項(xiàng)6

怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem

但這種整體縮放的用戶體驗(yàn)并不好，所以pass，我們來(lái)講百分比布局

百分比布局

//百分比布局



    
        選項(xiàng)1

選項(xiàng)2

選項(xiàng)3

選項(xiàng)4

怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem

可以看到百分比布局能自動(dòng)適應(yīng)屏幕寬度。

但是百分比布局有個(gè)缺點(diǎn)，寬度和高度不能做任何關(guān)聯(lián)

可以看上面的gif圖，寬度一直變長(zhǎng)，然而高度沒有變化

為了讓選項(xiàng)方塊的高度是寬度的一半，實(shí)現(xiàn)該效果我們需要知道屏幕的寬度，再來(lái)確定選項(xiàng)的寬度和高度

這里可以使用vw，但vw的兼容性比較差，我們可以使用rem來(lái)代替vw

首先rem是以html的font-size為基準(zhǔn)的，所以我們可以讓html的font-size==pageWidth

為了更好的使用rem,這里1rem等于屏幕寬度的10分之1。注意不能做到1rem==屏幕的百分之1。因?yàn)闉g覽器的最小 font-size是12px ;

按如上改動(dòng)代碼




    
        選項(xiàng)1
        選項(xiàng)2
        選項(xiàng)3
        選項(xiàng)4

效果入圖

怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem

可以看到寬度和高度都能按百分比變化了，但是我們會(huì)發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為rem。這里我們就要scss來(lái)?yè)Q算px了

3.scss動(dòng)態(tài)換算px

@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把整個(gè)屏幕分為10rem
}
$designWidth:320;//設(shè)計(jì)稿寬度
.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)于怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

標(biāo)題名稱：怎么在移動(dòng)端布局中實(shí)現(xiàn)動(dòng)態(tài)rem
文章出自：http://weahome.cn/article/gioopg.html