《CSS 单位完全参考手册》

标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数

总结：

这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。

文章要点：

1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。

2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了 100vh 在移动端全屏布局中常见的"被地址栏遮挡"难题。

3. 容器查询单位让组件真正可移植：cqi/cqw 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。

4. 字体相对单位不止 em/rem：除了常见的 em（当前元素字体大小）和 rem（根元素字体大小），还有 ch（数字 0 的字宽，适合设置最佳阅读行宽如 65ch）、cap（大写字母高度，适合图标与标题对齐）、lh（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。

5. CSS 数学函数是单位的粘合剂：calc() 可混合不同单位（如 100% - 240px），clamp() 实现流体排版（如 clamp(2rem, 5vw + 1rem, 4rem)），min()/max() 取极值，还有三角函数（sin/cos/tan）可用于无 JS 的圆形布局，指数函数（pow/sqrt）可构建模块化字号比例系统。

6. 实用选型建议：正文用 rem 尊重用户偏好，组件内部比例用 em 保持缩放一致性，line-height 推荐无单位写法（如 1.5）以便作为乘数继承，clamp() 的流体值中务必包含 rem 项以确保缩放无障碍性。

7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。

URL：
https://cssunits.com/

CSS Units

CSS Units — The Complete Reference

A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.

《5 个实用的 npx 辅助工具》

标签：
#Web开发 #NodeJs #命令行工具 #Npx #前端工程化 #代码质量 #Markdown #图片优化 #依赖管理 #拼写检查

总结：

文章要点：
1. cspell：一个拼写检查器，适合快速排查拼写错误，建议搭配配置文件使用自定义白名单，运行方式如 npx cspell **/*.md
2. markdown-link-check：专门检查 Markdown 文件中的链接是否有效，能帮助防止链接失效，推荐配合配置文件使用
3. image-guard：作者自己开发的工具，用于自动化近无损图片压缩，也适合在命令行中快速压缩图片，运行 npx image-guard 即可
4. npm-check-updates：快速检查 package.json 中的依赖是否有更新版本，适合在新仓库工作或手动处理依赖更新时使用
5. knip：功能比 npm-check-updates 更广，还能检查未使用的文件和导出，但文件和导出检查可能会有误报，运行 npx knip 即可

URL：https://meiert.com/blog/5-npx-helpers/

Jens Oliver Meiert

5 Useful npx Helpers

Joy on the command line.