rem佈局完成響應式開發，通俗且詳細的原理解析和代碼實現

一、rem佈局基本原理

原理：rem可以理解為一個長度單位，單位rem的值等於網頁font-size的值。如果網頁的字體大小為預設值16px，那麼1rem就等於16px，0.5rem等於8px。

根據這個原理，如果網頁預設的字體大小改變，那麼單位rem的大小也會改變，我們使用rem做單位的HTML元素的大小也會改變。

比如說：頁面中一個div的寬度為2rem，在沒有其他任何設置的情況下，他的大小就是32px，這時font-size改變為10px，那麼這個div的寬度就會改變為20px。

根據上述原理，如果我們寫一個js代碼，實現屏幕越大font-size的值越大，rem的值也就會越大，就可以實現讓頁面元素的大小適應屏幕大小。這樣不管你的網頁是在iphone6/7/8、華為中興還是小米魅族上顯示，都能完美的適配。

二、rem佈局代碼實現

var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

好多人用過這段代碼，但是具體涵義卻都很模糊，下麵我將詳細的解析一下：

var pixclPatio = 1 / window.devicePixelRatio;

window.devicePixelRatio：設備像素比，顧名思義，是設備的實際像素/邏輯像素，實際像素很好理解，就是我們的物理設備屏幕像素點的個數，而css所用的px則是邏輯像素，通常邏輯像素和實際像素是不同的，通過這個window對象，我們就可以知道他們的比值。

name="viewport"

viewport是設備顯示網頁的屏幕區域，viewport的寬高也就是屏幕邏輯像素的寬高。這個網站是被很多大神推薦過的，可以查閱不同型號手機的邏輯像素http://viewportsizes.com/

值得註意的是，很多瀏覽器會把viewport的寬度設置為980px，比如safari。為瞭解決這一問題，就需要這行代碼

<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />

width=device-width 表示將viewport寬度設置為設備實際的寬度
initial-scale、minimum-scale、maximum-scale分別表示用戶初始的縮放比例、最小縮放比例和最大縮放比例

如果這個縮放比例如果是1，那麼1px邏輯像素=1像素點實際像素。如果比例是2，1px就等於2像素點。將他的縮放設置為1*1/window.devicePixelRatio（也就是代碼中的變數pixclPatio），每個1px=邏輯像素/實際像素個像素點，那麼整個html也會放大邏輯像素/實際像素倍。

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

最後，獲取html的寬度，將html的寬度/37.5賦值給字體的大小。

就實現了 設備 >> 像素比 >> 屏幕縮放 >> html >> font-size >> rem 這樣一個傳遞鏈，也就實現了我們前面說的適配不同型號的設備。

要註意的是，這個37.5並不是固定的，只是設置為37.5正好在iphone6/7/8上1rem=20px，在iphone plus上等於30px，具體的大小可以根據需要來設置。

三、rem+響應式佈局

上述方法只適應於手機，如果想讓頁面在手機端電腦端都能完美顯示，還需要設置響應式佈局：

<link media="screen and (max-width:640px)" rel="stylesheet" type="text/css" href="phone.css">

使用第二部分的rem佈局之後，頁面的寬度會被改變，我們在使用max-width:640px就匹配不到手機了。

為瞭解決這一問題，可以在js裡加一個條件判斷，這樣css樣式就可以正常引入

if (window.screen.width < 640){
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

彙總一下，代碼就是這樣：

var pixclPatio = 1 / window.devicePixelRatio;
if (window.screen.width < 800){
    document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
    var html = document.getElementsByTagName('html')[0];
    var pageWidth = html.getBoundingClientRect().width;
    html.style.fontSize = pageWidth / 37.5+ 'px';
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

這個代碼雖然使用簡單方便，但還是存在一些問題，比如載入比較慢、無法適配手機橫屏等問題，如果您有更好的解決方法，歡迎批評指正，轉載註明出處即可。