背景 最近给 LUCI OS 官网做首屏改版，需求只有一句话： 听起来简单，但「缩放不变形」+「多端自适应」本质上是矛盾的。 经过 3 轮迭代，我们把问题拆成了 4 个小目标，并给出了最简洁的解法。

前言 最近在公司改bug，突然发现上一个前端留下的毛病不少，页面存在各种适配问题，为此甲方爸爸时常提出宝贵意见！ 你的页面是不是时常是这样： 侧边栏未收缩时： 收缩后： 这样（缩小挤成一坨）： 又或是

最近投稿了阮一峰周刊 to-unocss 的网站。 这个网站可以直接将 style 转换成 UnoCss 语法, 他内部使用了 transform-to-unocss 的库，可以直接将 SFC 页面转

👀之前在某论坛上看过一段话，大概的意思是说前端学到越深越会觉得深不可测，特别是架构和css。🤷‍♂️看完之后云里雾里，因为当时觉得css是再简单不过的东西了，后来...

前一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。 产品的具体诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过长时，标题的前后两端正常展示，中间用省略号...表示，并且鼠标悬

这天刚到公司，测试同事又在群里@我： 为什么页面鼠标一滑过，布局就错乱了？ 以前是正常的啊？ 刷新后也是一样 快看看怎么回事 同时还给发了一段bug复现视频，我本地跑个例子模拟下

移动端适配 所谓移动端适配，其概念就是在任意手机中我们开发的网页显示都是正常的，如下例子所示 上面的页面如果在 iPhone6/7/8 中查看那就一切正常，因为 iPhone6/7/8 的设备宽度就是

追忆往昔，穿越前朝，CSS也是当年前端三剑客之一，风光的很，随着前端跳跃式的变革，CSS在现代前端开发中似乎有点默默无闻起来。

主题效果 在VueUse官网中有这样一个效果，就是点击切换按钮，切换页面主题，由白天切换到黑夜。 动