css单位px、pt、em和rem的区别与选择
css单位的一个简单整理:
| 单位 | 类型 | 描述 |
|---|---|---|
| px(pixel,像素) | Absolute | 1个Viewport像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 |
| pt(point,磅) | Absolute | 1pt = 1/72英寸，物理长度单位，指的是72分之一英寸 |
| pc | Absolute | 1pc = 12pt |
| % | Relative | 相对于父元素的字体尺寸 |
| em | Relative | 相对于父元素的字体尺寸，相对长度单位。相对于当前对象内文本的字体尺寸 |
| rem | Relative | 相对长度单位,(即root em) 相对于html标签的字体尺寸,相对的只是HTML根元素 |
| keyword | Relative | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Relative | 相当于Viewport宽度的1/100,相对于视口的宽度 |
| vh | Relative | 相当于Viewport高度的1/100,相对于视口的高度 |
| vmin | Relative | 相当于Viewport高宽中长度相对较小的1/100,关于视口高度和宽度两者的最小值 |
| vmax | Relative | 相当于Viewport高宽中长度相对较大的1/100,关于视口高度和宽度两者的最大值 |
这里主要关注这几个单位：px、pt、%、em、rem和vw。
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
px(像素)的特点：
- IE无法调整使用px为单位的字体大小；
- 国内大部分网站能够调整的原因是是用来em或者rem作为字体单位；
- Firefox能够调整px、em和rem，但是使用ie浏览器（或者内核）的用户较多。
em的特点：
- 值不固定；
- 继承父元素字体大小。
注意：任意浏览器的默认字体都是16px，所以所有未经过调整的浏览器都符合：1em = 16px。如果需要声明可直接在body里面写上font-size:75%(任意值);然后；浏览器默认值就会变成16px * 75% = 12px;也就是1em就会等于12px。
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
THE END
