前言
写了那么久的css样式，但是一直对rem、em这些原理不是特别熟悉，所以今天就花了些时间专门学习它们。总结成此文，方便以后回顾查阅。
移动端适配方案
移动端适配方案有很多种：
viewport
首先中需要添加meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，设置设备按照一比一的尺寸进行显示，并且禁止用户缩放页面。这段代码将告诉浏览器：布局视窗的宽度应该等于设备宽度。如果没有这个meta标签，浏览器会使用默认的视窗宽度，通常是980px,它是针对大型屏幕优化的。
注意：viewport做不到真的让你的页面自适应。CSS3的媒体查询
通过查询设备的宽度来执行不同的 css 代码，最终实现不同分辨率下的正常显示。如pc下显示半屏，手机下显示全屏。如:
@media (min-width: 768px) and (max-width: 979px){};栅格化布局
如Bootstrap框架的栅格系统（.col-xs- ， .col-md-等）,主要是是使用了媒体查询的方式
@media (min-width: 1200px){
.col-lg-6 {width: 50%;}
}- 响应式网页的单位选用：
rem（基于根节点html【推荐】）、em(基于父元素)等； rem + viewport缩放 （如淘宝首页）flex弹性布局（伸缩等，如天猫首页）- 百分比布局（如width尽量使用百分数；**但百分比、em都是基于父元素进行计算的，在实际应用中不是很方便）
更多详细内容查看文章《移动端前端适配方案（总结）》
font-size
font-size属性：设置字体大小。
属性值
length：把 font-size 设置为一个固定的值。%：把 font-size 设置为基于父元素的一个百分比值。inherit：规定应该从父元素继承字体尺寸。
常用的3种设置字体大小单位的方式
px：比较固定精准的单位，不能响应式
px就是表示pixel，像素，是屏幕上显示数据的最基本的点；
- rem（font size of the root element）：CSS3新加，相对单位，相对于根元素
html；兼容性好（Chrome、IE9+等）【推荐】 - em（font size of the element）：相对单位，相对于父元素的
font-size，百分比用法跟em类似（页面层级越深，em的换算就越复杂）
一、px
px是相对固定的单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放。
比如PC端设置字号为30px，那么在移动端就会显得特别大;
比如PC端设置盒子宽度为500px看起来很合适，但是在375的iphone移动端来说就是灾难。——不是响应式的。
继承
只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的px字体大小设置
二、em
概念：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em 是一个很早就出现的css单位，IE6 都可以兼容。
em是相对于它的父元素的font-size，所以必须知道其父元素的字体大小设置！
缺点：页面层级越深，em的换算就越复杂。
计算公式是：
1 × 需要转换的像素值（子） / 父元素的font-size = em值实例1：
假如UI设计稿中，父元素为16px，子元素为22px。则子元素应该设置为：1 * 22 / 16 = 1.375，约等于1.4em。
即：
1em = 父 16px
xem = 子 22px
=>x = 1 * 子 / 父即1 * 22 / 16
实例2：
<style>
body { font-size: 14px; }
h1 { font-size: 16px; }
.p1 { font-size: 1em; }
.p2 { font-size: 2em; }
.p3 { font-size: 3em; }
</style>
<body>
<h1>假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：</h1>
<p class="p1">1em大小的文字</p>
<p class="p2">2em大小的文字</p>
<p class="p3">3em大小的文字</p>
</ul>
</body>假定当前默认字体尺寸是14px，n em 即为14px字体尺寸的n倍：
1rem 14px
2rem 28px
3rem 42px
三、rem【推荐】
概念：相对长度单位，直接相对于根元素（<html>）的font-size计算值的倍数。
这样就意味着，我们只需要在根元素确定一个参考值即可，这个参考值设置为多少，完全可以根据您自己的需求来定。其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放。
需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
优点：避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。
1. 设置参考值
UI常以iphone6 机型为标准出设计稿，所以我们也先设置iphone6的参考值为100px吧。
即：iphone6的<html style="font-size：100px"></html>。
1rem等于html根元素设定的font-size的px值，所以1rem = 100px。
2. 页面内其他元素的px与rem值转换
那么后面的CSS里面的rem值则是以这个 100 来换算：
例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为 width:300px;height:250px，
同理，假如一个元素宽度200px,高度为150，则换成rem，则是200px/100=2rem，150/100=1.5rem。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
大多数浏览器的默认字号是16px。因此也有设置参考值为16px的，即1rem = 16px。
3. 设计稿换算成rem值
UI出图后，我们就会根据UI图上标记的尺寸（宽高、字体大小等）开始编写页面结构和样式。
注意：
UI设计师给的设计稿一般都是物理分辨率，如UI基于phone6出的设计稿宽度就为750像素，会是我们写css样式的逻辑分辨率（和iphone6屏幕实际宽度）的两倍。iphone6 屏幕宽度 375px，UI设计稿是 750 的物理分辨率
iphone5 屏幕宽度 320px，UI设计稿是 640 的物理分辨率
由于我们上面设置了iphone6（屏幕宽度 375px）的font-size参考值为100px，但是UI设计稿的宽度是我们实际的2倍，所以只需要把设计稿上的 px 值除以 200（因为是100*2） 即为我们要的rem值啦。然后就可以愉快的写页面内容样式的rem值啦~~~
即：
css编写的rem值 = UI图的px值 / 2 / fontSize值100 = UI图的px值 / 2004. 设置页面动态font-size值【重点】
目的：为了根据不同设计稿精准适配，实现页面响应式，最佳选择是使用动态计算页面html的font-size值。
固定比值 = 375px / 100px = 其他设备屏幕的宽度W / 其html的fontSize值X
固定比值：即所有设备屏幕宽度的rem值是统一固定的！！！—— rem实现响应式的原理
此100px 是iphone6的html 的 font-size值(即参考值)
所以公式为：
html的动态fontSize值 = 其他设备屏幕的宽度W / iphone6屏幕宽度的rem值X即： 375/100 = W/X
X = W/3.75
获取到这个值，再赋给html元素的style：
var htmlDom = document.documentElement;
htmlDom.style.fontSize = htmlDom.clientWidth / 3.75 + 'px';document.documentElement 返回html dom中的root 节点， 即<html>这样就动态设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。
为什么要用rem单位？
从上面的介绍可知，px单位的的设置会影响子元素/子孙元素的字体大小显示，而em单位的设置也是根据父元素的字体来确定的。这时候父元素的字体大小设置就显得很关键了！
目前 rem 通常应用在移动端的 WEB 开发上。
浏览器兼容性
rem是CSS3新引进来的一个度量单位，支持的浏览器还是蛮多的，比如：Chrome、IE9+、Mozilla Firefox 3.6+、Apple Safari 5+和Opera11+。
如果要兼容IE6-8，还是直接放弃使用rem吧。但是对于不支持它的浏览器，应对方法也很简单，就是多写一
个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如：p{font-size:14px;font-size:0.875rem;}
其他
后期还需要补上css中pt、px、em、ex、in等这类长度单位详细说明。
参考文章《rem与px的转换》
参考文章《前端页面的适配使用rem换算》——推荐查看
推荐一个单位转换的工具