1.rem適配原理
首先清除一下默認樣式，這個基本上所有寫H5的都通用
a,
input,
button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
body {
margin: 0;
-webkit-user-select: none;
}
body * {
-webkit-user-select: none;
font-family: Helvetica;
}
body {
-webkit-text-size-adjust: 100%;
}
h1 {
margin: 0;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
現在我們看看如何使用rem解決適配問題
rem vs em (rem的r代表root)
rem 是相對根節點的字體大小進行計算的
em 是相對長度單位。相對於當前對象內文本的字體尺寸。
所以，rem的關鍵是根結點的字體大小
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width; //拿到html的寬度。打印出來是320
// 320/16 = 20 所以1rem = 20px
// 因爲此處除以16，所以16rem剛好把屏幕佔滿
html.style.fontSize = hWidth/16 + "px";
// 那麼80px === 4rem
})()
</script>
接下來看一下完整的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width; //拿到html的寬度。打印出來是320
// 320/16 = 20 所以1rem = 20px
// 因爲此處除以16，所以16rem剛好把屏幕佔滿
html.style.fontSize = hWidth/16 + "px";
// 那麼80px === 4rem
})()
</script>
<style>
body{
margin: 0;
}
div{
float: left;
box-sizing: border-box;
width: 4rem; //此處之前寫的是80px,轉換成就是4rem
height: 4rem; //此處之前寫的是80px,轉換成就是4rem
border: 1px solid #000;
}
div:nth-of-type(1){
background-color: red;
}
div:nth-of-type(2){
background-color: yellow;
}
div:nth-of-type(3){
background-color: green;
}
div:nth-of-type(4){
background-color: pink;
}
</style>
</head>
<body>
<!--
rem / em
rem的r代表root rem是相對根節點的字體大小進行計算的
em 是相對長度單位。相對於當前對象內文本的字體尺寸。
-->
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
看到這裏相信很多人和我一樣還是雲裏霧裏，沒關係，繼續往下看。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/15 + "px"; //font-size ==》
})()
// 給的設計稿w = 750px
// 所以量出來var hWidth = html.getBoundingClientRect().width === 750
// 750/15 = 50 也就是把這個屏幕平分成15份，font-size = 50px 1rem = 50px
// 那麼開發的時候，假如在設計稿中量出來一個103px,那麼就在css中寫成103/50 = 2.06rem就好了
// 那麼問題來了，每一次從px轉成rem是不是還要用計算器去除一下，很多人推薦了koala這個工具，
// 自動把px可以轉成rem。現在vscode有了相應的插件cssrem。
</script>
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"/>
<link rel="stylesheet" href="css/index.css" />
</head>
其實這個界面已經實現了適配。具體代碼可以在我的github中去下載。https://github.com/JiaojSun（h5basic）
有人可能覺得這個做法怎麼和網上說的大多數適配不太一樣，其實原理是一樣的，只是理解起來更簡單，現在看看網易的做法。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
這個6.4怎麼來的，當然是根據設計稿的橫向分辨率/100得來的。下面總結下網易的這種做法：
先拿設計稿豎着的橫向分辨率除以100得到body元素的寬度：
如果設計稿基於iphone6，橫向分辨率爲750，body的width爲750 / 100 = 7.5rem 如果設計稿基於iphone4/5，橫向分辨率爲640，body的width爲640 / 100 = 6.4rem
所以這個是6.4還是7.5是看你的設計稿的。這樣的話px=>rem 只需要除以100而不是50這樣純粹是爲了好計算。
有一篇博文寫的非常好，推薦看看從網易與淘寶的font-size思考前端設計稿與工作流
2.rem使用
總結一下，假如你初次j接觸移動端h5，來不及看上面的原理，那麼直接引入下面代碼，然後設計稿中有個寬度是109px，那麼你直接寫成1.09rem。(前提是設計稿是750px哦，如果設計稿是375那麼7.5也要改)
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script>(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth / 7.5 + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
以上已經把移動端適配講的清清楚楚了。
當然還有其他的方式，以後再說，這個已經足以解決工作中的困惑了！