rem 是如何實現自適應佈局的

時間 2019-11-11

標籤 rem 如何實現自適應佈局欄目 CSS 简体版

原文原文鏈接

摘要：rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個px字號，則能夠來算出元素的寬高。本文講的是如何使用rem實現自適應。·javascript

rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同窗對rem的評價不一，有的在嘗試使用，有的在使用過程當中遇到坑就棄用了。可是我對rem綜合評價是用來作web app它絕對是最合適的人選之一。css

rem是什麼？

rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。html

爲何web app要使用rem？

這裏我特別強調web app，web page就不能使用rem嗎，其實也固然能夠，不過出於兼容性的考慮在web app下使用更加能突顯這個單位的價值和能力，接下來咱們來看看目前一些企業的web app是怎麼作屏幕適配的。·前端

一、實現強大的屏幕適配佈局：

最近iphone6一下出了兩款尺寸的手機，致使的移動端的屏幕種類更加的混亂，記得一兩年前作web app有一種作法是以320寬度爲標準去作適配，超過320的大小仍是以320的規格去展現，這種實現方式以淘寶web app爲表明做，可是近期手機淘寶首頁進行了改版，採用了rem這個單位，首頁之內依舊是和之前同樣各類混亂，有定死寬度的頁面，也有那種流式佈局的頁面。java

咱們如今在切頁面佈局的使用經常使用的單位是px，這是一個絕對單位，web app的屏幕適配有不少中作法，例如：流式佈局、限死寬度，還有就是經過響應式來作，可是這些方案都不是最佳的解決方法。web

例如流式佈局的解決方案有很多弊端，它雖然可讓各類屏幕都適配，可是顯示的效果極其的很差，由於只有幾個尺寸的手機可以完美的顯示出視覺設計師和交互最想要的效果，可是目前行業裏用流式佈局切web app的公司仍是挺多的，看看下面我收集的一些案例：chrome

1.亞馬遜：瀏覽器

2.攜程：sass

3.蘭亭app

上面的網站都是採用的流式佈局的技術實現的，他們在頁面佈局的時候都是經過百分比來定義寬度，可是高度大都是用px來固定住，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點，每每只有幾個尺寸的手機下看到的效果是使人滿意的，其實不少視覺設計師應該沒法接受這種效果，由於他們的設計圖在大屏幕手機下看到的效果至關因而被橫向拉長來同樣。·

流式佈局並非最理想的實現方式，經過大量的百分比佈局，會常常出現許多兼容性的問題，還有就是對設計有不少的限制，由於他們在設計之初就須要考慮流式佈局對元素形成的影響，只能設計橫向拉伸的元素佈局，設計的時候存在不少侷限性。

2.固定寬度作法

還有一種是固定頁面寬度的作法，早期有些網站把頁面設置成320的寬度，超出部分留白，這樣作視覺，前端都挺開心，視覺在也不用被流式佈局限制本身的設計靈感了，前端也不用在搞坑爹的流式佈局。可是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操做的按鈕也很小，手機淘寶首頁起初是這麼作的，但近期改版了，採用了rem。·

3.響應式作法

響應式這種方式在國內不多有大型企業的複雜性的網站在移動端用這種方法去作，主要緣由是工做大，維護性難，因此通常都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位，由於這樣反而能夠節約成本，不用再專門爲本身的網站作一個web app的版本。

4.設置viewport進行縮放

天貓的web app的首頁就是採用這種方式去作的，以320寬度爲基準，進行縮放，最大縮放爲320*1.3 = 416，基本縮放到416都就能夠兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效。說實話我以爲他和用接下去咱們要講的rem都很是高效，不過有部分同窗使用過程當中反應縮放會致使有些頁面元素會糊的狀況。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

rem能等比例適配全部屏幕

上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來說下rem是如何工做的。·

上面說過rem是經過根元素進行適配的，網頁中的根元素指的是html咱們經過設置html的字體大小就能夠控制rem的大小。舉個例子：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

Demo 上面代碼結果按鈕大小以下圖：

我把html設置成10px是爲了方便咱們計算，爲何6rem等於60px。若是這個時候咱們的.btn的樣式不變，咱們再改變html的font-size的值，看看按鈕發生上面變化:

html{
    font-size:40px;
}

Demo

按鈕大小結果以下：

上面的width，height變成了上面結果的兩倍，咱們只改變了html的font-size，但.btn樣式的width,height的rem設置的屬性不變的狀況下就改變了按鈕在web中的大小。·

其實從上面兩個案例中咱們就能夠計算出1px多少rem:

第一個例子：

120px = 6rem * 20px(根元素設置大值)

第二個例子：

240px = 6rem * 40px(根元素設置大值)

推算出：

10px = 1rem 在根元素（font-size = 10px的時候）；

20px = 1rem 在根元素（font-size = 20px的時候）；

40px = 1rem 在根元素（font-size = 40px的時候）；

在上面兩個例子中咱們發現第一個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會致使按鈕的大小發生改變，咱們並不須要改變先前給按鈕設置的寬度和高度，其實這就是咱們最想看到的，爲何這麼說？接下來咱們再來看一個例子：

Demo

由上面兩個的demo中咱們知道改變html的font-size能夠等比改變全部用了rem單位的元素，因此你們能夠經過chrome瀏覽器的調試工具去切換第三個的demo在不一樣設備下的展現效果，或者經過縮放瀏覽器的寬度來查看效果，咱們能夠看到無論在任何分辨率下，頁面的排版都是按照等比例進行切換，而且佈局沒有亂。我只是經過一段js根據瀏覽器當前的分辨率改變font-size的值，就簡單的實現了上面的效果，頁面的全部元素都不須要進行任何改變。·

到這裏確定有不少人會問我是怎麼計算出不一樣分辨率下font-size的值？

首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給個人前提下，（固然這個尺寸確定不必定是640，能夠是320，或者480，又或是375）來看一組表格。

上面的表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不一樣寬度下font-site的值，你們看錶格上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，因此384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不一樣設備的寬度計算方式以此類推。·

Demo3中我是經過JS去動態計算根元素的font-size，這樣的好處是全部設備分辨率都能兼容適配，淘寶首頁目前就是用的JS計算。但其實不用JS咱們也能夠作適配，通常咱們在作web app都會先統計本身網站有哪些主流的屏幕設備，而後去針對那些設備去作media query設置也能夠實現適配，例以下面這樣：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

上面的作的設置固然是不能全部設備全適配，可是用JS是能夠實現全適配。具體用哪一個就要根據本身的實際工做場景去定了。·

下面推薦兩個國內用了rem技術的移動站，你們能夠上去參考看看他們的作法，手機淘寶目前只有首頁用了rem，淘寶native app的首頁是內嵌的web app首頁。

淘寶首頁：m.taobao.com

D X：m.dx.com

最後咱們再來看一看他的兼容性：

原文連接：http://caibaojian.com/web-app-rem.html

在線工具

@blinkcat，rem是能夠合併雪碧圖的，viewport設置確實簡潔，可是過於粗暴，全局都進行縮放，有時候我佈局並不但願全局縮放，部分佈局但願不用縮放，因此使用rem，不過具體使用什麼方法你們均可以根據實際狀況衡量。並非每一個人都喜歡使用sass，因此在px轉rem這塊我作了一個在線轉換工具：http://520ued.com/tools/rem·

REM自適應JS

具體使用方法請參考這篇文章：Rem精簡版實現自適應-優化flexible.js

//designWidth:設計稿的實際寬度值，須要根據實際設置
//maxWidth:製做稿的最大寬度值，須要根據實際設置
//這段js的最後面有兩個參數記得要設置，一個爲設計稿實際寬度，一個爲製做稿最大寬度，例如設計稿爲750，最大寬度爲750，則爲(750,750)
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 設置好後才能執行 refreshRem，否則 refreshRem 會執行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止執行兩次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 瀏覽器後退的時候從新計算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

來源：前端開發博客 (http://caibaojian.com/web-app-rem.html)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。