说明 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%

相关推荐

  1. 说明 1px1em1rem1vw1vh 区别

    2024-06-06 17:42:05       81 阅读
  2. em,rem,vw,vh,px,rpx,%用法

    2024-06-06 17:42:05       34 阅读
  3. HTTP1.0和HTTP1.1区别

    2024-06-06 17:42:05       31 阅读
  4. 移动端1px边框问题

    2024-06-06 17:42:05       22 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-06 17:42:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-06 17:42:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-06 17:42:05       82 阅读
  4. Python语言-面向对象

    2024-06-06 17:42:05       91 阅读

热门阅读

  1. springboot中使用RestTemplate 请求http接口

    2024-06-06 17:42:05       32 阅读
  2. 上传code至github的步骤

    2024-06-06 17:42:05       29 阅读
  3. 电脑问题和解决方法记录

    2024-06-06 17:42:05       24 阅读
  4. MyEclipse 新手使用教程

    2024-06-06 17:42:05       35 阅读
  5. 深度解读:Apache Kafka如何超越消息引擎的界限

    2024-06-06 17:42:05       25 阅读
  6. C#语言进阶(二)—事件 第三篇(事件访问器)

    2024-06-06 17:42:05       34 阅读
  7. WebRTC 在 iOS 端实现一对一通信

    2024-06-06 17:42:05       26 阅读
  8. 【OpenCV】基于opencv的视频间隔抽帧脚本

    2024-06-06 17:42:05       41 阅读
  9. HarmonyOS LocalStorage使用

    2024-06-06 17:42:05       30 阅读
  10. ceph报错整理

    2024-06-06 17:42:05       34 阅读