Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/703https://channel.meo-ai.com/posts/703Wed, 02 Sep 2026 13:28:01 GMT<span class="post-title-source">《CSS 单位完全参考手册》</span><br /><br />标签：<br /><a href="/search/result?q=%23%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91" title="#前端开发">#前端开发</a> <a href="/search/result?q=%23CSS" title="#CSS">#CSS</a> <a href="/search/result?q=%23%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1" title="#响应式设计">#响应式设计</a> <a href="/search/result?q=%23Web%E6%8E%92%E7%89%88" title="#Web排版">#Web排版</a> <a href="/search/result?q=%23%E5%AE%B9%E5%99%A8%E6%9F%A5%E8%AF%A2" title="#容器查询">#容器查询</a> <a href="/search/result?q=%23%E8%A7%86%E5%8F%A3%E5%8D%95%E4%BD%8D" title="#视口单位">#视口单位</a> <a href="/search/result?q=%23%E5%AD%97%E4%BD%93%E7%9B%B8%E5%AF%B9%E5%8D%95%E4%BD%8D" title="#字体相对单位">#字体相对单位</a> <a href="/search/result?q=%23CSS%E6%95%B0%E5%AD%A6%E5%87%BD%E6%95%B0" title="#CSS数学函数">#CSS数学函数</a><br /><br />总结：<br /><br />这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。<br /><br />文章要点：<br /><br />1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、<mark class="highlight">视口单位</mark>（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。<br /><br />2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了 <code>100vh</code> 在移动端全屏布局中常见的"被地址栏遮挡"难题。<br /><br />3. 容器查询单位让组件真正可移植：<code>cqi</code>/<code>cqw</code> 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。<br /><br />4. 字体相对单位不止 em/rem：除了常见的 <code>em</code>（当前元素字体大小）和 <code>rem</code>（根元素字体大小），还有 <code>ch</code>（数字 0 的字宽，适合设置最佳阅读行宽如 <code>65ch</code>）、<code>cap</code>（大写字母高度，适合图标与标题对齐）、<code>lh</code>（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。<br /><br />5. CSS 数学函数是单位的粘合剂：<code>calc()</code> 可混合不同单位（如 <code>100% - 240px</code>），<code>clamp()</code> 实现流体排版（如 <code>clamp(2rem, 5vw + 1rem, 4rem)</code>），<code>min()/max()</code> 取极值，还有三角函数（<code>sin/cos/tan</code>）可用于无 JS 的圆形布局，指数函数（<code>pow/sqrt</code>）可构建模块化字号比例系统。<br /><br />6. 实用选型建议：正文用 <code>rem</code> 尊重用户偏好，组件内部比例用 <code>em</code> 保持缩放一致性，<code>line-height</code> 推荐无单位写法（如 <code>1.5</code>）以便作为乘数继承，<code>clamp()</code> 的流体值中务必包含 <code>rem</code> 项以确保缩放无障碍性。<br /><br />7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。<br /><br />URL：<br /><a href="https://cssunits.com/" target="_blank" rel="noopener" title="https://cssunits.com/">https://cssunits.com/</a><a class="tgme_widget_message_link_preview" href="https://cssunits.com/" target="_blank" rel="noopener" title="A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw."> <div class="link_preview_site_name accent_color">CSS Units</div> <img class="link_preview_image" alt="CSS Units — The Complete Reference" src="/static/https://cdn4.telesco.pe/file/AT6h8pjfCkp_NRrPaD5TkS-87t7UrKQHXNF-NoWZhC1pDd2HlAyJu29y8zrNUSI82Uu4vmjOKmJ65DbVIkgB6uqrGGa-ZuTI3f-39CT-anyXVvjvGsSdF_tocD3xH_AiGgJd3mLLtOLdqEeHS5nz7RYNXG7MzBU1uUM26Jj87nW5fExS5Wf2N0XTxn_zUVx8joWV_wnZmH10otZqAeKHqBiqwtXjV-99EFtl3BiB1VU9OPiiBARJAypdJ9hDcE8Ys3fDSdSXMKR8GPU6Ruy0DvDyvBoyp59ibi5_PX-X4KQrI0-ZueMxN-GdN_e5wlBs2MbhxplSQWiuq8cov38NdQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">CSS Units — The Complete Reference</div> <div class="link_preview_description">A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.</div> </a>