# px-rpx-em-rem-%-vw-vh-vm ## px，em和rem的区别 px是固定⻓度单位，不随其它元素的变化⽽变化 em是相对于⽗级元素的单位，会随⽗级元素的属性（font-size或其它属性）变化⽽变化 rem是相对于根⽬录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化⽽变化 浏览器的默认字体⾼都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 ### 1.px `px`就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 ### 2.em `em`参考物是父元素的`font-size`，默认字体大小是16px，所以1em不是固定值，因为它会继承父元素的字体大小 ## 3.rem `rem`参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用，减少很大运算工作量，例：`html`大小为10px，12rem就是120px ### 4.% % 是相对于父元素的大小设定的比率，`position:absolute;`的元素是相对于已经定位的父元素，`position：fixed；`的元素是相对可视窗口 ### 5.vm vm相对于视口的宽度。视口被均分为100单位---1vw等于视窗宽度的1% ~~~ h1 { font-size: 8vw; } ~~~ 再举个例子：浏览器**宽度**1200px, 1 vw = 1200px/100 = 12 px ## 6.vh vm相对于视口的宽度。视口被均分为100单位---1vh等于视窗高度的1% ~~~ h1 { font-size: 8vh; } ~~~ 再举个例子：浏览器**高度**900px, 1 vh = 900px/100 = 9 px 总结： ~~~ 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 ~~~