NotJustCode
·
CSS 基于视区的长度单位
💡
原文中文，约3800字，阅读约需9分钟。
📝
内容提要
本文介绍CSS长度单位，包括绝对和相对单位。绝对单位只需知道px，其他可用px表示。相对单位包括上层元素、字体、行高和视区。视区单位新增18个，但兼容性不佳，生产环境需避免使用。
🎯
关键要点
- CSS长度单位分为绝对长度单位和相对长度单位。
- 绝对长度单位中，px是最常用的，其他单位如英寸和毫米可以用px表示。
- 逻辑像素(px)与物理像素的比例通过window.devicePixelRatio获取，但在不同设备上可能不准确。
- 相对长度单位包括相对于上层元素、字体、行高和视区的单位。
- 视区单位包括vw、vh等，表示浏览器窗口的可渲染区域的百分比。
- CSS新增了视区状态，分为大视区、小视区和动态视区，以解决移动设备上的显示问题。
- 基于视区状态新增了18个长度单位，但兼容性不佳，生产环境中应避免使用。
➡️
