摘要：最近在看關(guān)于移動(dòng)端的響應(yīng)式布局，其中涉及到比較多的就是大小屬性的設(shè)置等等，今天自己就捋一捋的用法。然而萬(wàn)一不能用該怎么辦啊，所以還是要學(xué)會(huì)自己寫(xiě)原生的頁(yè)面布局，也就會(huì)有今天的這篇文章了。的使用是指相對(duì)于根元素的字體大小的單位。

對(duì)于一個(gè)前端的初學(xué)者來(lái)說(shuō)，首先要做好的事就是切頁(yè)面了，切頁(yè)面不得不說(shuō)的就是布局了，布局的重要性不言而喻，為了良好的用戶(hù)體驗(yàn)，提出了許多不一樣的布局：響應(yīng)式布局，彈性布局，流動(dòng)布局等等，也流入出了許多的框架。最近在看關(guān)于移動(dòng)端的響應(yīng)式布局，其中涉及到比較多的就是大小屬性的設(shè)置：px、vw、vh、%、em、rem等等，今天自己就捋一捋rem的用法。

一想到寫(xiě)移動(dòng)端的頁(yè)面，就要考慮自己寫(xiě)的頁(yè)面能夠適應(yīng)各種不同的移動(dòng)設(shè)備，起初想想要做到感覺(jué)好難啊，最初想到的就是用第三方的框架，用別人寫(xiě)的東西應(yīng)該會(huì)很方便。然而萬(wàn)一不能用該怎么辦啊，所以還是要學(xué)會(huì)自己寫(xiě)原生的頁(yè)面布局，也就會(huì)有今天的這篇文章了。先看看自己用普通百分比、像素來(lái)寫(xiě)的頁(yè)面和后來(lái)改用rem寫(xiě)的頁(yè)面的對(duì)比：

小分辨率（375*667）

小分辨率（414*736）

上面是兩種小的分辨率，最后得到的效果不會(huì)很差，感覺(jué)差不多，現(xiàn)在還成大一點(diǎn)的分辨率，效果就不一樣了：

大分辨率

簡(jiǎn)單的對(duì)比下就看出了效果。當(dāng)不用別人的框架，該怎么去寫(xiě)。最容易想到的就是用百分比來(lái)寫(xiě)，這種寫(xiě)法對(duì)設(shè)備的寬度有用，寬度是固定的，對(duì)高度不起什么作用，大部分人的做法就是寬度用百分來(lái)設(shè)置，高度用px來(lái)設(shè)置，但這種的做法體驗(yàn)并不是很好，用分辨率小的設(shè)備感覺(jué)不是很差，一旦換成了分辨率比較大的設(shè)備效果就差很多了，大部分的標(biāo)簽元素都會(huì)被拉伸。高度固定，換成了大的分辨率各種元素效果還是原來(lái)的，各種元素固定了大小，體驗(yàn)并不是很好。

rem是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，通過(guò)根元素進(jìn)行適配的。

普通使用

大部分是通過(guò)設(shè)置html的字體大小就可以控制rem的大小，例如：html的字體大小為20px，那么就說(shuō)20px為1rem，接下來(lái)的所有元素的大小都基于這個(gè)比例來(lái)?yè)Q算。這種的算法是存在問(wèn)題的，當(dāng)我們計(jì)算頁(yè)面的寬度rem值得時(shí)候都是使用某一款移動(dòng)設(shè)備的分辨率來(lái)計(jì)算的，下面的例子我用的是iphone6的分辨率375*667，它的寬度為375px，20px為1rem，那么375px就是18.75rem。看下面的代碼：

    
        
        
        
        
        
    
    
        

            
        
        
手手手手手手手手手手手手手手手手手手手手手手手
        
段段段段段段段段段段段段段段段段段段段段段段段
        
方方方方方方方方方方方方方方方方方方方方方方方方
        
哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
    

上面的代碼在375667的分辨率下剛好能夠占滿(mǎn)寬度，當(dāng)你切換到其他的分辨率（如414736）時(shí)問(wèn)題就來(lái)了，看圖：

這個(gè)問(wèn)題的原因很簡(jiǎn)單，這種寫(xiě)法即使用的是rem也起不來(lái)作用，寬度和高度都是固定的，width為18.75rem就是375px，切換成其它分辨率（如414*736），它的寬度還是375px，空白處還是顯示出來(lái)了，很多人會(huì)認(rèn)為可以把寬度設(shè)置成百分比的形式，或者用媒介查詢(xún)@media,或是viewport設(shè)置中的那個(gè)deviceWidth（）的方式來(lái)解決問(wèn)題，當(dāng)然這些方式均能解決寬度的問(wèn)題，然而高度的問(wèn)題又該怎么辦呢？看下面：

    
        
        
        
        
        
        
        
    
    
        

            
        
        
手手手手手手手手手手手手手手手手手手手手手手手
        
段段段段段段段段段段段段段段段段段段段段段段段
        
方方方方方方方方方方方方方方方方方方方方方方方方
        
哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
    

看效果：

看圖就知道了，寬度可以適應(yīng)不同的移動(dòng)設(shè)備，然而高度一直都沒(méi)有發(fā)生變化，一直都是150px，頁(yè)面效果并不好看，分辨率大了，頁(yè)面被拉伸，高度顯得變小了。

正確使用

動(dòng)態(tài)計(jì)算html的font-size，核心是切換不同移動(dòng)設(shè)備通過(guò)js獲取設(shè)備寬度，然后按比例計(jì)算html的font-size的值，動(dòng)態(tài)變化。

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

上述代碼解釋?zhuān)?/p>

設(shè)計(jì)稿橫向分辨率為375（iphone6），計(jì)劃20px為1rem；

布局的時(shí)候，各元素的css尺寸= 20 * （設(shè)備寬度/設(shè)計(jì)稿豎向分辨率）。

完整代碼：

window.addEventListener(("orientationchange" in window ? "orientationchange" : "resize"), (function() {//判斷是屏幕旋轉(zhuǎn)還是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);

上面的做法就可以動(dòng)態(tài)的設(shè)置各種標(biāo)簽元素的寬和高，按比例的調(diào)試適應(yīng)不同的移動(dòng)設(shè)備。例如下：
上面的代碼中是以iphone6為設(shè)計(jì)稿的，box1的height為7.5rem(150px)，如果切換成iphone6 plus的大小，box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px，與iphone6時(shí)的高度是不一樣的，寫(xiě)頁(yè)面時(shí)會(huì)更加的美觀(guān)。看效果：

看上面顯示的效果就可以看出來(lái)，和計(jì)算出的結(jié)果是一樣的，方法正確。以后可以用了。看看整體效果：

頁(yè)面元素完全沒(méi)有被拉伸的效果，按照一定的比例縮放，保持頁(yè)面效果美觀(guān)。

    
        
        
        
        
        
        
        
        
    
    
        

            
        
        
手手手手手手手手手手手手手手手手手手手手手手手
        
段段段段段段段段段段段段段段段段段段段段段段段
        
方方方方方方方方方方方方方方方方方方方方方方方方
        
哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
    

終于寫(xiě)完了這篇文章，感覺(jué)寫(xiě)文章的過(guò)程就是再學(xué)習(xí)的過(guò)程，可以多做做；

最近在學(xué)習(xí)寫(xiě)寫(xiě)網(wǎng)易云的播放頁(yè)面，一做頁(yè)面就要考慮布局的事情，就思考了這方面的問(wèn)題，記錄下來(lái)。