2. CSS 中的单位

CSS 中的单位

CSS 新单位:vmin 和 vmax

  1. vmin

vmin 表示相对于视口宽度和高度中较小者的百分比。

  1. vmax

vmax 表示相对于视口宽度和高度中较大者的百分比。

例如,如果视口的宽度为 1000px,高度为 800px,那么 1vmax 就等于 10px(即 1000px 的 0.1),1vmin 就等于 8px(即 800px 的 0.1)。

使用 vmin 和 vmax 单位可以根据视口的宽度和高度来设置元素的大小,实现响应式布局。

CSS 新增的单位 ch

在 CSS 中,ch 是一个相对单位,它代表数字 0(零)的宽度,在当前的字体和字体大小下的度量。这个单位特别适用于需要基于字符宽度进行布局的场景,比如保持文本的垂直对齐或者在元素内部确保一定的空间以容纳文本字符。

相关推荐
YQteamdyq1 小时前
为什么 { ...state } 会悄悄杀掉响应式?yq-sanyi v0.4.2 的三处修复
前端·javascript
Java后端的Ai之路2 小时前
01-React基础教程
开发语言·前端·python·react.js·前端框架
颜进强2 小时前
25 · NestJs DurableProviders 持久化 Provider:把 ContextId 当缓存键
前端·后端·ai编程
爱丶不疚2 小时前
Electron: Sentry 都采集了什么?你知道吗
前端·electron
恋猫de小郭2 小时前
Dart 4.0 要彻底移除 dart:mirrors,Augmentations 应该要来了
android·前端·flutter
流水白开2 小时前
React的Virtual DOM、Diff算法和Fiber
前端·react.js
乘风gg2 小时前
Spec Kit vs OpenSpec vs Superpowers:我为什么最后自己搭了一套
前端·ai编程·claude
颜进强2 小时前
24 · NestJs LazyLoadingModules 懒加载模块:你在前端天天 `import()` 懒路由,但 Nest 偏偏不能懒加载路由
前端·后端·ai编程