可以看到百分比布局能自動適應屏幕寬度。

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

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

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

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

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

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

按如上改動代碼

    
        選項1
        選項2
        選項3
        選項4
    

效果入圖

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

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

@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把整個屏幕分為10rem
}
$designWidth:320;//設計稿寬度
.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;

}

關于怎么在移動端布局中實現(xiàn)動態(tài)rem問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。