说明 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%
相关推荐
CodeSheep1 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明19893 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆20 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician25 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666839 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel1 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq