自适应和响应式的区别
- 自适应：多端请求时返回不同的页面，服务端需要准备多套程序或者多套模板。
- 响应式：主要是利用css媒体查询使得在不同屏幕大小下，页面有不同表现，主要是元素布局等变化。
响应式，一套代码解决多端。展示阅读类交互逻辑简单且少，且移动端与pc端内容差异不大，如新闻站，企业官网。
- px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
- em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
- rem 的值并不是固定的，始终是基于根元素 的，也代表倍数。
- vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%，举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
- vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
em
em 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。但是有一个问题，如果设置 1.2em 则变成 19.2px，问题是 px 表示大小时数值会忽略掉小数位的（你想像不出来半个像素吧）。而且 1em = 16px 的关系不好转换，因此，常常人为地使 1em = 10px。这里要借助字体的 % 来作为桥梁。
因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 body 中全局声明 font-size=62.5%=10px，也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。
但是由于 em 是相对于其父级字体的倍数的，当出现有多重嵌套内容时，使用 em 分别给它们设置字体的大小往往要重新计算。比如说你在父级中声明了字体大小为 1.2em，那么在声明子元素的字体大小时设置 1em 才能和父级元素内容字体大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 因为此 em 非彼 em。再举个例子：
1 | <span>Outer <span>inner</span> outer</span> |
结果：外层 为 body 字体 10px 的 1.6倍 = 16px，内层 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。
明显地，内部 内的文字受到了父级 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。
rem
rem values are relative to the root html element, not the parent element.
rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，因为它始终是基于根元素（）的。比如默认的 html font-size=16px，那么想设置 12px 的文字就是：12÷16=0.75(rem)，仍然是上面的例子，CSS改为：
1 | html { font-size: 62.5%; } |