目录
CSS 单位
CSS 有几个不同的单位用于表示长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width等。长度有一个数字和单位组成如 10px, 2em等。数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。对于一些 CSS 属性，长度可以是负数。
有两种类型的长度单位：相对长度和绝对长度。
绝对长度
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px | 像素 (1px = 1/96th of 1in) |
| pt | point，大约1/72英寸； (1pt = 1/72in) |
| pc | pica，大约 12pt，1/6英寸； (1pc = 12 pt) |
熟悉px即可。
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
| 单位 | 描述 |
|---|---|
| em | 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； |
| ex | 依赖于英文字母小 x 的高度 |
| ch | 数字 0 的宽度 |
| rem | rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% |
| vmin | vw和vh中较小的那个。 |
| vmax | vw和vh中较大的那个。 |
| % |
提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
em的计算标准
em以当前标签字体大小作为标准计算。
当前标签字体大小需要为px。如果当前标签的字体大小为em，则向上找父标签的字体大小，逐级相乘，直至找到有明确字体大小定义的标签。
举例：p标签内部的span标签的字体大小计算方法是：2 * 10px = 20px
<style>
#em {
font-size: 10px;
}
</style>
<p id="em">
em是相对单位，等于当前元素字体大小。
<span style="font-size: 2em">
内部的文字
<span style="font-size: 0.5em">内部的内部</span>
</span>
</p>rem的计算标准
rem 以根标签（html标签）的字体大小作为标准计算。
html标签的默认字体大小时16px，rem不受上级标签的影响，因此计算更加方便。但是，并不是说em不重要，将rem和em结合起来使用能使页面开发更加得心应手。
注意：中文字符设置大小时应遵循偶数的原则，即使用12px,16px,18px,32px等，如果使用奇数，在以后可能会出现意向不到的问题。
建议：正文字符不要小于8px
举例：p标签内部的span标签的字体大小计算方法是：2 * 16px = 32px
<style>
#rem {
font-size: 10px;
}
<p id="rem">
<span style="font-size: 2rem">内部测试</span>
</p>网页中字体大小的设置
网页设计中为啥少用奇数字体？
UI设计师的原因
多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体
浏览器的原因
其一是为了迁就ie6，万恶的ie6会把定义为13px的字渲染成14px，你可以写个页面试试，还有一个原因是，偶数宽的汉字，比如12px宽的汉字，去掉1像素的间距，填充了像素的实际宽是11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在12像素时，竖线在中间，左右各5像素，显得均衡。
其二像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看。
实际应用
偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
总结：需要知道em 和 rem的计算方式
em 和 rem 的区别 ：区别在于rem 设置字体大小 相对的是HTML根元素大小
em相对于父元素字体大小逐级相乘
em计算
<style>
#em {
font-size: 10px;
}
</style>
<p id="em">//字体大小应该为10px，//但是浏览器最小为12px 就先不去像这个问题了
em是相对单位，等于当前元素字体大小。
<span style="font-size: 2em">//10*2=20
内部的文字
<span style="font-size: 0.5em">内部的内部</span>//20*0.5 = 10
</span>
</p>rem 计算
<style>
#rem {
font-size: 10px;
}
<p id="rem">//相对于HTML根元素字体大小，默认为16px，16*2 = 32px
<span style="font-size: 2rem">内部测试</span>
</p>
/*以iphone6位参考，html字体大小为100px，那么1rem=100px，比如 header 的高度150px，设置的时候使用height: 1.5rem;*/
/*使用rem适配，按照逻辑像素尺寸计算，比如 iPhone6逻辑像素宽375px，计算的时候，
就是按照375计算
设计尺寸一般是按照物理像素计算，是750*/