订阅专栏Css单位px，rem，em，vw，vh的区别

px 像素
像素，为影像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意，有时亦被称为pel（picture element）。每个像素可有各自的颜色值，可采三原色显示，因而又分成红、绿、蓝三种子像素（RGB色域），或者青、品红、黄和黑（CMYK色域，印刷行业以及打印机中常见）。

简单来说，像素是一个 相对单位 ，不同于厘米这种任意物品都通用的尺寸。像素根据展示媒介的不同而大小不同。

 

rem 根元素字体大小
它的全称是 font size of the root element （根元素的字体大小）
它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。

应用场景：
可以用来做web app的屏幕适配

使用和修改：
将根元素html的font-size设置为20px，此时box的宽高都为20px，也就是1rem = 20px
 

em 相对于父元素的大小
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

% 相对长度单位
百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小。
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）。
 

vw、vh 相对于视口的单位
视口
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。
pc端:浏览器的可视区域
移动端:Layout Viewport

VW 相对于视口宽的1%

vh 相对于视口高的1%