移動端rem佈局的學習（基於本身寫的一個網易雲播放頁面的思考）

時間 2019-11-10

標籤移動 rem 佈局學習基於本身寫的一個網易播放頁面思考欄目無線简体版

原文原文鏈接

對於一個前端的初學者來講，首先要作好的事就是切頁面了，切頁面不得不說的就是佈局了，佈局的重要性不言而喻，爲了良好的用戶體驗，提出了許多不同的佈局：響應式佈局，彈性佈局，流動佈局等等，也流入出了許多的框架。最近在看關於移動端的響應式佈局，其中涉及到比較多的就是大小屬性的設置：px、vw、vh、%、em、rem等等，今天本身就捋一捋rem的用法。javascript

說在前面

一想到寫移動端的頁面，就要考慮本身寫的頁面可以適應各類不一樣的移動設備，起初想一想要作到感受好難啊，最初想到的就是用第三方的框架，用別人寫的東西應該會很方便。然而萬一不能用該怎麼辦啊，因此仍是要學會本身寫原生的頁面佈局，也就會有今天的這篇文章了。先看看本身用普通百分比、像素來寫的頁面和後來改用rem寫的頁面的對比：css

普通百分百佈局與rem佈局的比較

小分辨率（375*667）html

小分辨率（414*736）前端

上面是兩種小的分辨率，最後獲得的效果不會不好，感受差很少，如今還成大一點的分辨率，效果就不同了：java

大分辨率jquery

簡單的對比下就看出了效果。當不用別人的框架，該怎麼去寫。最容易想到的就是用百分比來寫，這種寫法對設備的寬度有用，寬度是固定的，對高度不起什麼做用，大部分人的作法就是寬度用百分來設置，高度用px來設置，但這種的作法體驗並非很好，用分辨率小的設備感受不是不好，一旦換成了分辨率比較大的設備效果就差不少了，大部分的標籤元素都會被拉伸。高度固定，換成了大的分辨率各類元素效果仍是原來的，各類元素固定了大小，體驗並非很好。算法

rem的使用

rem是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位，經過根元素進行適配的。框架

普通使用iphone

大部分是經過設置html的字體大小就能夠控制rem的大小，例如：html的字體大小爲20px，那麼就說20px爲1rem，接下來的全部元素的大小都基於這個比例來換算。這種的算法是存在問題的，當咱們計算頁面的寬度rem值得時候都是使用某一款移動設備的分辨率來計算的，下面的例子我用的是iphone6的分辨率375*667，它的寬度爲375px，20px爲1rem，那麼375px就是18.75rem。看下面的代碼：佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: red;
            
            }
            #box2{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 18.75rem;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 18.75rem;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 18.75rem;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>

上面的代碼在375667的分辨率下恰好可以佔滿寬度，當你切換到其餘的分辨率（如414736）時問題就來了，看圖：

這個問題的緣由很簡單，這種寫法即便用的是rem也起不來做用，寬度和高度都是固定的，width爲18.75rem就是375px，切換成其它分辨率（如414*736），它的寬度仍是375px，空白處仍是顯示出來了，不少人會認爲能夠把寬度設置成百分比的形式，或者用媒介查詢@media,或是viewport設置中的那個deviceWidth（<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">）的方式來解決問題，固然這些方式均能解決寬度的問題，然而高度的問題又該怎麼辦呢？看下面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: red;
            
            }
            #box2{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 100%;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 100%;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 100%;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>

看效果：

看圖就知道了，寬度能夠適應不一樣的移動設備，然而高度一直都沒有發生變化，一直都是150px，頁面效果並很差看，分辨率大了，頁面被拉伸，高度顯得變小了。

正確使用

動態計算html的font-size，核心是切換不一樣移動設備經過js獲取設備寬度，而後按比例計算html的font-size的值，動態變化。

var d = document.documentElement;//獲取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';

上述代碼解釋：

設計稿橫向分辨率爲375（iphone6），計劃20px爲1rem；
佈局的時候，各元素的css尺寸= 20 * （設備寬度/設計稿豎向分辨率）。

完整代碼：

window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判斷是屏幕旋轉仍是resize
                function c() {
                    var d = document.documentElement;//獲取html元素
                    var cw = d.clientWidth || 750;
                    d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
                }
                c();
                return c;
            })(), false);

上面的作法就能夠動態的設置各類標籤元素的寬和高，按比例的調試適應不一樣的移動設備。例以下：
上面的代碼中是以iphone6爲設計稿的，box1的height爲7.5rem(150px)，若是切換成iphone6 plus的大小，box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px，與iphone6時的高度是不同的，寫頁面時會更加的美觀。看效果：

看上面顯示的效果就能夠看出來，和計算出的結果是同樣的，方法正確。之後能夠用了。看看總體效果：

頁面元素徹底沒有被拉伸的效果，按照必定的比例縮放，保持頁面效果美觀。

源碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <script type="text/javascript" src="js/rem.js" ></script>
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: red;
            
            }
            #box2{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 100%;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 100%;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 100%;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
        <script>
            window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判斷是屏幕旋轉仍是resize
                function c() {
                    var d = document.documentElement;//獲取html元素
                    var cw = d.clientWidth || 750;
                    d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
                }
                c();
                return c;
            })(), false);
        </script>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>