不写媒体查询也能自适应？clamp/min/max 实战讲透
先上一段让你在媒体查询里写到手酸的“断点地狱”： 三个断点，只调一个字号。宽屏要大、手机要小，中间要平滑过渡——用媒体查询硬写也行，但断点一多就失控。 CSS 的流式数学函数一次性解决： 一行代码，不用断点，不用媒体查询，字号在 16px ...
2026年08月的文章
lee1214
CSS 开发 > 实现毛玻璃效果 使用backdrop-filter：不用切图，一行写出 iOS 质感
先上一段让你用 PS 做模糊效果的“复杂代码”： 能实现毛玻璃效果，但你得额外维护一层背景，并同步尺寸、层级和模糊参数。每个毛玻璃卡片都要写一套伪元素，代码量也不小。 backdrop-filter 一行搞定： 它直接对元素后面的内容做模糊...
CSS 也能做“按需渲染”？content-visibility 实战指南
先上一段让你滚动时卡成 PPT 的长列表代码： 10000 个 DOM 节点一次性渲染，页面加载时卡死 3 秒，滚动时掉帧。你试过虚拟列表，但实现复杂度上来了；你试过分页加载，但产品要的是无限滚动。 content-visibility: ...
object-fit / object-position——图片不变形的新姿势
先上一段让你 UI 被吐槽的“图片变形”代码： 设计师给的是 16:9 的图，你要显示在 1:1 的框里。直接设置宽高，图片被拉扁了。用 background-image 做背景图，但又没法用 <img> 的语义（SEO 吃不到...
从 @media 到 @container 组件化的响应式
先上一段让你组件被全局断点拖垮的代码： 组件是响应式了，但它是根据视口宽度的——不管这个组件被放到页面的哪个位置，只要屏幕宽度小于 768px，它就会变成纵向，即使它所在容器非常宽。 媒体查询的局限性：它只能看整个浏览器的窗口。你在布局里把...
