说明 1px、1em、1rem、1vw、1vh 的区别

说明 1px、1em、1rem、1vw、1vh 的区别

单位(units) px em rem vw vh
相对单位/绝对单位 绝对 相对 相对 相对 相对
含义 像素 相对于父元素字体大小(倍数) 相对于根元素字体大小(倍数) 相对于视口的宽度(百分之 1 的倍数) 相对于视口的高度(百分之 1 的倍数)
举例 - 父元素字体大小 16px, 则子元素中 1em=16px 根元素字体大小 16px, 则当前元素中 1rem=16px 视口宽度为 1000px,则 1vw=10px 视口高度为 500px,则 1vh=5px
  • 通常来说,html 元素是根元素
  • 1 vw 相当于视口宽度的 1%;1 vh 相当于视口高度的 1%
相关推荐
沸点小助手6 分钟前
「妈,我真不是修电脑的」获奖名单公示|本周互动话题上新🎊
前端·人工智能
兵麒麟20 分钟前
JavaScript Promise 完全掌握:从外卖订单到优雅异步
前端
转转技术团队21 分钟前
不写一行代码,用 Xmind 思维导图跑通多端自动化回归
前端
铁皮饭盒24 分钟前
同样是算力巨头,为什么华为死磕英伟达,AMD 却 "躺平看戏"?
前端·后端
文心快码BaiduComate25 分钟前
用Comate 7天完成”鹅鸭杀”游戏网站开发
前端·后端·程序员
2401_8654396328 分钟前
CSS中隐藏元素的多重技巧与应用场景
开发语言·前端·javascript
灰子学技术39 分钟前
Envoy CSRF 保护过滤器实现分析
前端·csrf
Strayer44 分钟前
工艺图图在线编辑器
前端·canvas
zhangxingchao1 小时前
AI应用开发二:Embedding与向量数据库
前端·人工智能·后端
Momo__1 小时前
Vue3 v-memo:长列表渲染的性能核武器
前端·vue.js