rem布局實際上就是實現等比縮放
試想，如果我們的元素在不同的屏幕上可以按照相同的比例來進行縮放就好了。
rem的計算原理：
試想把屏幕平均分成10份，那么每一份就是1/10，我們選擇每一份的大小是1rem，那么一個5*(1/10)的大小就占屏幕大小的50%，這就是rem
我們設計稿的寬度是750px，那么對於設計稿上寬度為600px的一個元素，它的rem值是怎么計算呢？
- 上面我們把屏幕分成了10份，屏幕寬度就是10rem
- 設計稿上600px元素在設計稿上占的比例是 600/750，將這個比例應用到屏幕上，屏幕的寬度是10rem，那么，這個元素在屏幕上占用的rem就是 600/750*10rem
- 所以，公式就是 設計稿元素尺寸/設計稿寬度*以rem為單位的屏幕寬度
一般1rem寬度，是html根字體的大小
要根據屏幕大小動態設置跟字體的大小
處理rem布局中的字體
首先針對於文字內容比較多的網頁，是不適合用rem布局的，因為這時候大屏的用戶可以自己選擇想要更大的字體，還是更多的內容，如果使用了rem，這個效果就不可以實現了。所以像是百度知道這種都不行，一些偏向圖片內容多一些的例如淘寶，就可以。
但是字體的大小和寬度是不可以用rem來確定的，字體大小和寬度不成線性關系。
解決辦法：在body上做修正*
html {fons-size: width / 100}
body {font-size: 16px}
使用實例:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>rem布局</title>
</head>
<body>
<noscript>開啟JavaScript，獲得更好的體驗</noscript>
<div class="p1">
寬度為屏幕寬度的50%，字體大小1.2em
<div class="s1">
字體大小1.2.em
</div>
</div>
<div class="p2">
寬度為屏幕寬度的40%，字體大小默認
<div class="s2">
字體大小1.2em
</div>
</div>
</body>
</html>
CSS
html {
font-size: 32px; /* 320/10 */
}/*針對320屏幕，分成10份*/
body {
font-size: 16px; /* 修正字體大小 */
/* 防止頁面過寬 ,頁面過寬的時候取780居中*/
margin: auto;
padding: 0;
width: 10rem;
/* 防止頁面過寬 */
outline: 1px dashed green;
}
/* js被禁止的回退方案 ,js被用戶禁止的時候，使用媒體查詢針對各個屏幕進行設置*/
@media screen and (min-width: 320px) {
html {font-size: 32px}
body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
html {font-size: 48px}
body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
html {font-size: 64px}
body {font-size: 20px;}
}
noscript {
display: block;
border: 1px solid #d6e9c6;
padding: 3px 5px;
background: #dff0d8;
color: #3c763d;
}
/* js被禁止的回退方案 */
.p1, .p2 {
border: 1px solid red;
margin: 10px 0;
}
.p1 {
width: 5rem;
height: 5rem;
font-size: 1.2em; /* 字體使用em */
}
.s1 {
font-size: 1.2em; /* 字體使用em */
}
.p2 {
width: 4rem;
height: 4rem;
}
.s2 {
font-size: 1.2em /* 字體使用em */
}
js:
var documentElement = document.documentElement;
function callback() {
var clientWidth = documentElement.clientWidth;
// 屏幕寬度大於780，不在放大
clientWidth = clientWidth < 780 ? clientWidth : 780;//針對例如pc這種屏幕過大的，設置寬度是780，兩邊居中留空白
documentElement.style.fontSize = clientWidth / 10 + 'px';//動態設置屏幕大小除以10為根html字體大小。
}
document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
步驟總結：
-
確定設計稿寬度，一般是750px，選取一個手機設備的寬度做基准（例如iphone6 375px, 處理好再拓展其他機型）
-
限制使用rem布局（因為好多大牛公司都用rem，說明還是又一定的道理的），選取一個font-size的值做基數
-
按照設計稿上的元素，計算每個元素在界面上的尺寸 設計稿標注尺寸/設計稿橫向尺寸*10rem = 元素實際rem為單位的css尺寸， 這一步不用手動計算，可以通過postcss的px2rem插件計算。
-
使用js適配各種型號的設備寬度，設置到根html上
(1),動態設置viewport的scale,var scale = 1/dpr; //dpr是由設備決定的設備像素比並動態設置meta標簽中的各項的值 init-scale = maximum-scale = minimun-scale = scale
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximun-scale=' + scale + ', minimun-scale=' + scale + ', user-scalable=no');dpr = 2時， scale = 1/dpr = 0.5;
dpr = 3時，scale = 1/dpr = 0.333...最后生成的標簽是這樣
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimun=0.5, user-scalable=no"></meta>
（2），動態計算font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth /10 + 'px';
這里選取將可是窗口寬度分成了10份，每份就是一個rem，所以整個屏幕就是10rem，1rem = 根html font-size的值。
<html data-dpr="2" style="font-size: 75px;">
項目連接: 點這里