px,em,rem的区别（补充vh和vw的）

px、em、rem区别介绍 | 菜鸟教程 (runoob.com)

px像素：相对长度单位。相对于显示器屏幕的分辨率而言的。

　　　　特点：IE无法调整使用px作为单位的字体大小

　　　　　　　国外大部分网站能够调整的原因在于使用了em或rem作为字体单位。

　　　　　　　Firefox能够调整px和rem，但是大部分中国网民还是使用IE内核

em:相对长度单位(大屏自适应可以使用到)。相对于当前对象内文本的字体尺寸（依赖父元素进行计算）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（浏览器的默认字体高都是16px）。

　　　　特点：em的值不是固定的。

　　　　　　　em会继承父级元素的字体大小

rem:新增的相对单位（root em,根em）,

　　和em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

p {font-size:14px; font-size:.875rem;}

！！！！！！

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

 

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

 

 

 

rem小数处理：如果一个元素尺寸是 0.625px，那么其渲染尺寸应该是 1px，空出的 0.375px 空间由其临近的元素填充；同样道理，如果一个元素尺寸是 0.375px，其渲染尺寸就应该是 0，但是其会占据临近元素 0.375px 的空间

　　问题：background-image，经常因为小数像素导致背景图片被裁掉一部分。

　　解决：1使用iconfont

　　　　　2如果需要background-image,尽量为背景图设置一定的空白间隙

补充：
　　em设置根元素的字体大小，如果需要根据根元素改变的元素，大小长度单位需要用rem
　　

html { font-size:0.75em; }
.panel { font-size:1rem;}

　　vw:可视宽度的百分之一（1/100）vh:可视高度的百分之一（1/100）vh与vw也是用在可响应式布局当中，只作为单位。

　　vmax和vmin,这两个单位的做用固定形状时用：固定正方形，不管可视宽度和高度如何变化，固定形状不变；最小宽度和最小高度都是按照百分比给的，会随可视窗体大小改变而改变，最大宽度和最大高度都是按照百分比给的，可视窗体变大会变大，窗体缩小到最小宽度是不会再缩小。（vmax:vw和vh中的最大值，vmin：vw和vh中的最小值）