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 等）、视口单位（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>https://channel.meo-ai.com/posts/684https://channel.meo-ai.com/posts/684Fri, 24 Jul 2026 15:51:25 GMT<span class="post-title-source">《Color.js：认真对待颜色这件事》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23Web%E5%BC%80%E5%8F%91" title="#Web开发">#Web开发</a> <a href="/search/result?q=%23ColorJS" title="#ColorJS">#ColorJS</a> <a href="/search/result?q=%23CSS_Color_Level_4" title="#CSS_Color_Level_4">#CSS_Color_Level_4</a> <a href="/search/result?q=%23%E9%A2%9C%E8%89%B2%E7%A9%BA%E9%97%B4%E8%BD%AC%E6%8D%A2" title="#颜色空间转换">#颜色空间转换</a> <a href="/search/result?q=%23%E8%89%B2%E5%9F%9F%E6%98%A0%E5%B0%84" title="#色域映射">#色域映射</a> <a href="/search/result?q=%23DeltaE" title="#DeltaE">#DeltaE</a> <a href="/search/result?q=%23TreeShakeable" title="#TreeShakeable">#TreeShakeable</a> <a href="/search/result?q=%23NPM%E5%BA%93" title="#NPM库">#NPM库</a> <a href="/search/result?q=%23%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE" title="#开源项目">#开源项目</a> <a href="/search/result?q=%23Lea_Verou" title="#Lea_Verou">#Lea_Verou</a> <a href="/search/result?q=%23%E9%A2%9C%E8%89%B2%E6%8F%92%E5%80%BC" title="#颜色插值">#颜色插值</a><br /><br />总结：<br />由CSS颜色规范编辑者Lea_Verou和Chris_Lilley打造的专业颜色处理库，支持Lab/LCh、OKLab/OKLCh、Display_P3等海量颜色空间，完整兼容CSS_Color_Level_4。提供真正的色域映射、多种DeltaE色差算法和色度适应方法，API清晰易用且支持链式操作。模块化设计可tree-shake，零依赖，已被Sass、Open_Props、axe等知名项目采用，NPM累计下载超2.46亿次。<br /><br />文章要点：<br />1. 出身"正规军"——两位作者正是CSS颜色规范的编辑者，对颜色科学的理解刻在DNA里，不是随便写写的玩具库<br />2. 颜色空间全家桶——Lab/LCh、OKLab/OKLCh、sRGB家族、Display_P3、Jzazbz、REC.2100等统统支持，转换随心所欲<br />3. 科学严谨不糊弄——真正的色域映射而非粗暴裁剪，多种DeltaE色差计算和色度适应算法，专业度拉满<br />4. API好用又灵活——面向对象+静态函数双模式，链式操作丝滑流畅，还能按需引入模块做tree-shake，包体积可控<br />5. 业界认可度超高——浏览器用它测试CSS_Color_4/5实现，Sass、Open_Props、axe都在用，NPM下载量突破2.46亿<br />6. 生态还在扩张中——除了核心库，还在孵化Color_Elements网页组件、Color_Apps工具集和Color_Palettes配色研究项目<br /><br />URL：<a href="https://colorjs.io/" target="_blank" rel="noopener" title="https://colorjs.io">https://colorjs.io</a>