北京
这是“Frontend Challenge - Comfort Food Edition”CSS 艺术赛的投稿作品。对我来说，舒适食物不是一大盘什么，而是那些小东西：因为等不及坐下、站在柜台边就吃掉的那块点心。所以我决定画一家面包房——然后转念一想：如果柜台里每一个甜品都是猫咪呢？
事实证明这是正确的决定。九只猫角色代替了九个点心，而有角色比点心有趣得多。作品里有：带耳朵的马卡龙、抹茶杯子蛋糕、鲷鱼烧、爪印饼干、撒了过多糖针的巧克力甜甜圈、一块蛋糕切件、一个蛋糕棒棒糖，还有一杯焦糖布丁。上面的架子上还摆着一个需要提前48小时预订的整只猫咪蛋糕。
我同样不希望画作是漂浮在背景中的一个物体，而是想创造一间可以站进去的房间。于是有了饮料黑板、架子上的罐子、一盏吊灯、木质柜台，还有一只在别人咖啡旁睡着的店猫——那杯咖啡肯定在变凉。
整个作品没有图片、没有 SVG、没有 Canvas、没有 JavaScript。每根胡须都是一个带 border-radius 的 div。
最值得说的三个地方：
第一个真正的决策是让画面如何缩放。CSS 艺术包含数百个坐标，为每个断点维护变体听起来太痛苦了。所以整个场景是一个容器，使用 container-type: inline-size 和 aspect-ratio: 16 / 10 定义。内部所有元素以 cqw（场景宽度的 1%）或百分比度量。高度由宽度推导，横纵轴同步缩放，320px 和 1920px 下画面完全一致，只是大小不同，而且整幅作品没有一个 media query。
一个遇到的坑：.scene 自己的规则里使用 cqw 会解析到某个外部容器，而不是自身，所以 .scene 的属性用像素，cqw 只出现在后代元素上。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
