簡介

在頁面整體布局中，頁面元素的尺寸大小（長度、寬度、內(nèi)外邊距等）和頁面字體的大小也是重要的工作之一。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了安居免費(fèi)建站歡迎大家使用！

一個(gè)合理設(shè)置，則會(huì)讓頁面看起來層次分明，重點(diǎn)鮮明，賞心悅目。反之，一個(gè)不友好的頁面尺寸和字體大小設(shè)置，則會(huì)增加頁面的復(fù)雜性，增加用戶對(duì)頁面理解的復(fù)雜性；甚至在當(dāng)下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應(yīng)各式各樣的訪問終端，將成為手中的一塊“燙手的山芋”。

所以在近幾年，“九宮格”式的“流式布局”再度回歸。為了提供頁面布局，及其它的可維護(hù)性、可擴(kuò)展性，我們嘗試將頁面元素的大小，以及字體大小都設(shè)置為相對(duì)值，不再是孤立的固定像素點(diǎn)。使其能在父元素的尺寸變化的同時(shí)，子元素也能隨之適應(yīng)變化。以及結(jié)合少量最新CSS3的@media查詢，來實(shí)現(xiàn)“響應(yīng)式布局”，bootstrap這類CSS框架大勢興起。

然而在CSS中，W3C文檔把尺寸單位劃為為兩類：相對(duì)長度單位和絕對(duì)長度單位

相對(duì)單位：

%：相對(duì)單位，它是相對(duì)于父級(jí)(自身)大小進(jìn)行定位

• 缺點(diǎn)：能確定范圍的還是比較好計(jì)算，對(duì)于不太好確定值的地方不好使用百分比，并且會(huì)導(dǎo)致變形，高度一般不好控制

em：相對(duì)于當(dāng)前容器的字體大小進(jìn)行變化，比如當(dāng)前容器內(nèi)字體大小為20px，那么1em = 20px

• 缺點(diǎn)：會(huì)根據(jù)當(dāng)前容器字體大小發(fā)生變化，假設(shè)每個(gè)容器字體大小不一致，那么計(jì)算會(huì)非常繁瑣

rem：font size of the root element。相對(duì)于當(dāng)前根(html)元素的字體大小進(jìn)行變化，比如當(dāng)前設(shè)置html的字體大小為20px，那么1rem = 20px。瀏覽器默認(rèn)的1rem = 16px

絕對(duì)單位：

px：像素單位是絕對(duì)單位，你設(shè)置了多少，不管什么屏幕下，都會(huì)保持不變。

缺點(diǎn)：任何情況下都是固定值

em和rem的區(qū)別點(diǎn)擊查看

如何才能使用rem進(jìn)行適配呢？

• 字體大小

  • 值根據(jù)html根元素大小而定，同樣可以作為寬度，高度等單位

• 適配原理

  • 將px替換成rem，動(dòng)態(tài)修改html的font-size適配

• 兼容性

  • Ios6以上和android2.1以上，基本覆蓋所有流行的手機(jī)系統(tǒng)

下面是我平時(shí)寫移動(dòng)端使用的rem自適應(yīng)配置：

// 動(dòng)態(tài)修改 html font-size 大小
// 通過js操控根元素的字體大小,從而做到屏幕適配
!(function(doc,win){
var docHtml =doc.documentElement;
// 判斷窗口有沒有orientationchange這個(gè)方法，有就賦值給一個(gè)變量，沒有就返回resize方法
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    resizes= function(){
// 獲取當(dāng)前屏幕的大小
        var cw =docHtml.clientWidth;
        
// 如果沒有獲取到當(dāng)前屏幕的大小
        if(!cw) return;
        
if (cw >= 750) {
            docHtml.style.fontSize= '100px';
        }else {
// 動(dòng)態(tài)修改font-size 100 * (375 / 750) = 50 （iPhone6/7/8為例）
            docHtml.style.fontSize = 100 * (cw / 750) + 'px';
        }
    }
if (!doc.addEventListener) return;
/*
        addEventListener事件方法接受三個(gè)參數(shù)：
        （1）事件名
        （2）回調(diào)執(zhí)行函數(shù)
        （3）是否冒泡
*/ 
    win.addEventListener(resizeEvt,resizes,false);
// 綁定瀏覽器縮放與加載事件
    doc.addEventListener('DOMContentLoaded', resizes, false); 
})(document,window)