移动端rem，机型适配布局界面配置，摆脱花里胡哨样式出现（一套操作适配所有机型）

1.先说说几个前端常用的几个单位的概论：

• 1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
• 2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
• 3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
• 4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

2.开始进入rem教程

1.先设置header里面的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2.在header写上<script> 标签

(function () {
    document.addEventListener('DOMContentLoaded', function () {
	  var deviceWidth = document.documentElement.clientWidth;
	  if(deviceWidth > 640) deviceWidth = 640;
	  document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }, false);
	window.onresize = function(){
	  var deviceWidth = document.documentElement.clientWidth;
	  if(deviceWidth > 640) deviceWidth = 640;
	  document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
	};
})();

3.重置移动端更多丑样式

【注】尽量不要覆盖这个css，特别是html的font-size

* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}
html {
  font-size: calc(100vw / 7.5);
}
body {
  font-size: 0.28rem;
  font-family: Arial, Helvetica, 'WenQuanYi Micro Hei', 'PingFang SC',
    'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
::before,
::after {
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
content {
  display: block;
}
img {
  border: 0;
  display: inline-block;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a:focus,
input,
textarea,
button:focus,
input:focus,
textarea:focus {
  outline: none;
}
::-moz-focus-inner {
  border: none;
  outline: none;
}
code,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-thumb {
  display: none;
  width: 0;
}

问题：为什么要设置Html的font-size？
答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。

问题：为什么是clientWidth/640?为什么要乘以100？
答：
1.是因为这里是作为一个基础数值，换个方向去想，这里先不乘以100以免产生误解。例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（320/640）=25px；这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=（320/640）。
.
2.一般浏览器的最小字体是12px，如果html的font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题。
.
3. 为了计算方便 我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变.