一
1.px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
任意浏览器的默认字体高都是16px。
单位换算
默认情况下 16px = 1em = 1 rem
实际像素 = html默认像素 单位 比如1.5em 的实际像素=161.5 = 24px， 3rem = 163 = 48px
2.PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
3.EM
em（font size of the element）是指相对于父元素的字体大小的单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
单位换算
比如：父元素字体 16px： 16 px = 1 em ；16px0.75=12px ；0.75em = 12px*
温馨提示
所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
4.rem
rem（font size of the root element）是指相对于根元素的字体大小的单位 rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
单位换算
16px = 1rem 根元素字体16像素 ：16 px = 1 rem ；16px x 0.75= 12px ；0.75 rem = 12px
兼容性
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
二
1.目前对于移动端适配的内容布局效果是这样的：
1.百分比，所有需要动态调整的元素宽高采用百分比，字号固定像素。
2.rem，通过计算或者JavaScript获取到设备像素/CSS像素的比例，确定根元素的字体像素，然后所有单位根据根元素字体像素进行rem设置，确定大小。
而基础rem会根据设备变化而变化。
3.vw，根据当前设备的Visual Viewport宽度作为100vw，然后得出单位vw的宽度，所有元素按照vw为单位进行样式排布。
4.Media Query：通过断点来进行不同宽度区间的设备样式适配。
2.设计师给了一个750px宽度的设计稿（注意这里是750px而不是375px）
1.前端工程师用750px的这个比例开始还原
2.把宽高是px的转换成rem
3.字体使用px而不使用rem
4.flexible.js会自动判断dpr进行整个布局视口的放缩
3.rem布局和字体的处理 从flexible.js中可见，在宽高中使用的是rem，这是为了保证在不同宽度尺寸的设备中能够保证布局的等比例缩放。
4.而为什么字体不使用rem而是采用px呢？
首先，用过rem单位的小伙伴都会发现，使用rem后由于不同的尺寸，换算之后出现各种奇奇怪怪的数值，最为明显的就是更多的小数位，比如13.755px之类的数值。在浏览器中，各浏览器中对小数点的计算存在偏差，而且有些带小数的font-size值在特定的浏览器显示并不够清晰。 其次，我们希望在小屏幕下面显示跟大屏幕同等量的字体。并且如果使用rem的话，那么由于等比例的存在，在小屏幕下就会存在小屏幕字体更小的情况，不利于我们更好的去阅读，违背了适配的初衷。所以，对于字体的适配，更好的做法就是使用px和媒体查询来进行适配。
所以，也就不难解释为什么要对font-size进行放大的处理了，如下的sass代码：
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
5.响应式与自适应的选择 最后，对于响应式和自适应的区别，网上有各种各样的解释。
个人认为，其实没必要把它讲得那么复杂，知乎上有个小伙伴讲我觉得就很白话文：
响应式针对的是不同分辨率设备而进行的适配式设计，以利用@media规则为主要手段，而自适应则忽略@media以比例布局为主，目的是适应不
同的浏览器窗口大小。
于是我们会发现，现今大型网站，例如说淘宝网，已经没有做响应式了。什么意思呢？
我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套dom结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。
为什么呢？
试想一下淘宝这种大型网站，一个分页下的商品条目特别多，并且每个商品条目的dom结构又十分复杂，而且pc端往往显示的信息是要比手机端更多的。如果不分开做两套，而是直接用响应式的话，那么pc端上显示的很多dom就要在手机端上隐藏，结果这些dom都没有被用到，但是却加载了。在这个流量和速度至上的时代，代码冗余先不说，多加载的这些无用的代码而消耗的流量，从某种意义上来说就已经损失了很多的效益。
最后 考虑到兼容性的问题，原先我们在文章头部说到的那段代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
从Chrome32+版本开始是会默认禁用用户缩放的，但是考虑到兼容大部分设备，还是要加上其他设置，让meta标签能够有更好的容错性。也就是下面这段代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;">
