px、em、rem、%、vw/vh、vm 各自代表的含义

目录

1、px

2、em

3、rem

4、%

5、vw/vh

6、vm

补充：

css还有哪些长度单位？

---

1、px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px就是设备或者图片最小的一个点。

px是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。

特点是：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

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

特点是：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

3、rem

rem是相对于根元素html，通常一个 html 元素设置一个字体大小 find-size,其他根元素单位就为 rem。在根元素确定一个参考值，设计html大小为10px，即设置1.2rem就是12px 。

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%

相对于父元素

1. 对于普通定位元素就是我们理解的父元素
2. 对于position: absolute; 的元素是相对于已定位的父元素
3. 对于position: fixed; 的元素是相对于ViewPort（可视窗口）

5、vw/vh

css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

例：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

       浏览器高度900px, 1 vh = 900px/100 = 9 px。

6、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

缺点：兼容性差。

补充：

1rem= 1em= 16px
1em= 16px
1MB= 1040K

css还有哪些长度单位？

in：寸

cm：厘米

mm：毫米

t：point，大约1/72寸

pc：pica，大约6pt，1/6寸