说明 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%
相关推荐
Mintopia12 分钟前
🚀 一文看懂 “Next.js 全栈 + 微服务 + GraphQL” 的整体样貌
前端·javascript·全栈
Mintopia15 分钟前
🧬 医疗Web场景下,AIGC的辅助诊断技术边界与伦理
前端·javascript·aigc
半桶水专家19 分钟前
父子组件通信详解
开发语言·前端·javascript
Watermelo61722 分钟前
从vw/h到clamp(),前端响应式设计的痛点与进化
前端·javascript·css·算法·css3·用户界面·用户体验
寻星探路26 分钟前
测试开发话题10---自动化测试常用函数(2)
java·前端·python
Moment28 分钟前
快到  2026  年了:为什么我们还在争论  CSS 和 Tailwind?
前端·javascript·css
梵得儿SHI39 分钟前
Vue 核心语法详解:模板语法中的绑定表达式与过滤器(附 Vue3 替代方案)
前端·javascript·vue.js·插值语法·vue模板语法·绑定表达式·过滤器机制
江城开朗的豌豆42 分钟前
TypeScript枚举:让你的代码更有"选择权"
前端·javascript
江城开朗的豌豆1 小时前
TypeScript接口:打造你的代码“契约”之道
前端·javascript
江城开朗的豌豆1 小时前
TypeScript类:面向对象编程的超级武器
前端·javascript