CSS中的px、rem、em、vw/vh 总结

一.px

在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。

在pc端，字体通常为16px。

1. 像素

像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

我们在js或者css代码中使用的px单位就是指的是css像素，物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多。

css像素	为web开发者提供，在css中使用的一个抽象单位物理像素只与设备的硬件密度有关，任何设备的物理像素都是固定的
物理像素	只与设备的硬件密度有关，任何设备的物理像素都是固定的

二.百分比

可以通过百分比单位 " % " 来实现响应式的效果。

(1)子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。

(2)top和bottom 、left和right

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

(3)padding、margin

子元素的padding和margin，如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

(4)border-radius

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，

还有比如translate、background-size等都是相对于自身的。

三.自适应场景下的rem解决方案

1.rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px，所以：

    1 rem = 12px

为了计算方便，通常可以将html的font-size设置成：

    html{ font-size: 62.5% }

这种情况下：

    1 rem = 10px

2.em: 相对于当前文档对象内文本的字体尺寸而言，若未指定字体大小则继承自上级元素，以此类推，直至 body，若 body 未指定则为浏览器默认大小。

rem: 相对于根文档对象（ body/html ）内文本的字体尺寸而言，若未指定字体大小则继承为浏览器默认字体大小。

四.通过vw/vh来实现自适应

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

单位	含义
vw	相对于视窗的宽度，视窗宽度是100vw
vh	相对于视窗的高度，视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

如果要将px换算成vw单位，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小，比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：

1px = （1/375）*100 vw

假设设备可视范围为高度 900px，宽度 750px，则，1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px。

假设浏览器的宽度设置为 1200px，高度设置为 800px， 则1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。

五.混合使用

calc()语法

calc的语法就是简单的四则运算，

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 可以使用百分比、px、em、rem等单位；
3. 可以混合使用各种单位进行计算；
4. 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的；
5. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

height: calc(100vh - (2 * 10)px);