CSS的px、em、rem、%、vw、vh、vm 单位区别 骑猪看日落 2023-01-18 04:13 148阅读 0赞 > 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单位 h1 { font-size: 8vw; } 再举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px > 6.vh vm相对于视口的宽度。视口被均分为100单位 h1 { font-size: 8vh; } css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 > 7.vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 [https://juejin.cn/post/6844903849153527815][https_juejin.cn_post_6844903849153527815] [https_juejin.cn_post_6844903849153527815]: https://juejin.cn/post/6844903849153527815
还没有评论，来说两句吧...