px、em、rem、vw、vh、vm这些单位的区别

简介: 学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~如果大家喜欢,可以点赞或留言💕~~~~,谢谢大家⭐️⭐️⭐️~~~
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

一.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。

目录
相关文章
|
6月前
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
907 10
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
|
6月前
|
编解码 前端开发 小程序
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
126 0
|
17天前
|
UED
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
1月前
Px,em,rem的区别
【10月更文挑战第10天】 Px,em,rem的区别
52 2
|
5月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
60 1
|
1月前
|
前端开发 小程序 JavaScript
面试官:px、em、rem、vw、rpx 之间有什么区别?
面试官:px、em、rem、vw、rpx 之间有什么区别?
38 0
|
4月前
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
69 0
|
6月前
|
编解码
px,em,rem,vw,vh之间的区别
px,em,rem,vw,vh之间的区别
|
6月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
136 0