移動端佈局之動態rem

時間 2019-11-08

標籤移動佈局動態 rem 欄目無線简体版

原文原文鏈接

動態rem

1. 首先咱們先介紹當下的長度單位

px 像素css

em 一個M的寬度 / 一個漢字的寬度 1em == 自身的font-sizehtml

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

vh 全稱viewport height 100vh == 視口高度瀏覽器

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

由於網頁的默認font-size：16px 因此1rem默認是16pxchrome 的最小字體像素默認是12px字體

一個元素在沒有設置font-size的狀況下會去繼承父元素的font-sizespa

2. 移動端的佈局

移動端的佈局通常就兩種設計

一是總體縮放
二是百分比佈局

先說總體縮放

總體縮放，其實就是將pc端的網頁縮小到手機端屏幕能看到網頁全貌的大小code

蘋果手機剛出來時就是使用這種佈局，蘋果公司研究發現世界上大多數的網頁寬度是980px，然而蘋果手機的寬度像素是320px，因此蘋果手機的瀏覽器用320像素的屏幕寬度去模擬980px的寬度，實現了總體縮放cdn

爲了看到效果，要將<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>
複製代碼

能夠看到百分比佈局能自動適應屏幕寬度。

可是百分比佈局有個缺點，寬度和高度不能作任何關聯

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

爲了讓選項方塊的高度是寬度的一半，實現該效果咱們須要知道屏幕的寬度，再來肯定選項的寬度和高度

這裏可使用vw，但vw的兼容性比較差，咱們可使用rem來代替vw

首先rem是以html的font-size爲基準的，因此咱們可讓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>
複製代碼

效果入圖

能夠看到寬度和高度都能按百分比變化了，可是咱們會發現一個很麻煩的東西，設計師給咱們的設計稿，咱們卻必須把每一個元素的像素單位換算爲rem。這裏咱們就要scss來換算px了

3.scss動態換算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;

}
複製代碼