常见的前端css长度单位

在前端开发中，有一些常用的单位可以用来表示长度、宽度、间距等尺寸。

css单位分为绝对长度单位和相对长度单位：

传统的项目开发中，我们只会用到px、%、em这几个单位，它们可以适用于大部分的项目开发，并且具有良好的兼容性。

CSS3新特性！！ rem、vh、vw、vm

1.  像素（Pixel）：最常用的单位之一是像素（px），它表示屏幕上的一个像素点。例如：10px。

● px 也是一个绝对·单位px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。

● 手机屏幕大小不一，差异较大，所以反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以移动端不用px。

● 通常PC端大屏浏览器的网页，使用px 单位比较多。移动端少用，因为 px 的长度相对固定，无法根据大小不一的移动端设备自适应改变大小。

2.  百分比（Percentage）：

● 通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值。

● 子元素的 top、bottom、left、bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素高度。

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

● 百分比单位可以用于设置图片和视频等媒体元素的宽度。通过将图像或媒体的宽度设置为百分比，可以使其根据容器的大小自动调整。

● 父元素的高度未明确设置，或者使用了百分比作为父元素的高度，则子元素的定位可能会受到影响。

3.  自适应单位（Viewport Units）：CSS3 新特性。视口单位（Viewport Units）根据浏览器窗口的大小进行相对计算，常见的有视口宽度单位（vw）和视口高度单位（vh）。例如，50vw 表示占据窗口宽度的50%。

● vh: 无论视口高度多少，都将视口高均分为100份，每一小份就是1vh，所以，也是相对单位可随视口大小变化而自动变化。

● vw：同理，将视口宽均分。

● 网页视口指的是浏览器内部的可视区域大小。

● 移动端的视口大小通常指的是手机屏幕的尺寸。

● 不包括手机上的导航栏、状态栏以及可能存在的其他系统UI元素。视口大小是减去这些空间后的可视区域。

4.  EMS（Em）：Em 是相对于父元素的字体尺寸计算的单位。例如，如果一个元素的字体大小是16px，设置 2em 将等于 32px（2倍的16px）。

● 相对于父元素字体大小的单位，多层嵌套可能导致累积计算！

5.  REM（Root Em）：Rem 类似于 Em，但是是相对于根元素（html）的字体大小计算的单位。如果根元素的字体大小是16px，设置 2rem 将等于 32px（2*16px）。

● 以网页根元素元素上设置的默认字体大小为1rem 默认 1rem=16px。

● 可以实现响应式布局。

● 响应式布局指的是元素大小能根据屏幕大小随时变化。所有以 rem 为单位的位置、大小都跟着根元素字体大小而变化。在屏幕大小变化的时候改变根元素的 font-size 就可以了。 postcss-pxtorem插件可以实现px自动转换成rem，实现响应式布局