一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
一.px
1.相对长度单位。相对于显示器屏幕分辨率而言。
2.存在浏览器不兼容问题。
二.em
1.相对长度单位。相对于当前对象内文本字体尺寸。
2.em值并不是固定的，em会继承父级元素的大小.
3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px.
4.存在容易造成字体设置混乱问题。
三.rem
1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px.
2.如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。
3.浏览器兼容性比较好。
四.vm 和vh
vm：css3新单位，view width的简写，相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度
vh：css3新单位，view height的简写，相对于视口的高度。视口被均分为100单位的vh (即浏览器可视区) 100vh = 可视区高度
假设设计稿尺寸为1920*1080
即：
网页宽度=1920px
网页高度=1080px
我们都知道
网页宽度=100vw
网页高度=100vh
所以，
在1920x*1080px的屏幕分辨率下
1920px = 100vw
1080px = 100vh
举个例子：浏览器高度1200px, 1 vh = 1200px/100 = 12 px。 举个例子：浏览器高度1200px，宽度1200px，取最小的浏览器高度，1 vm = 1200px/100 = 12 px。
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
