北京
这是Frontend Challenge CSS Art的投稿作品，主题是“舒适食物版”。作者想画的，其实是一家面包店。 “舒适食物对我来说不是一大盘什么，而是那些小东西。”作者写道，“是你站在柜台前等不及坐下就吃完的那块点心。” 于是她决定画一家面包店。然后她转念一想：如果柜台里每一件点心都是猫呢？ 这个决定后来被证明是明智的——因为它带来了九个小角色，而不是九块点心。角色永远比点心更有画头。有带耳朵的马卡龙、抹茶杯子蛋糕、鲷鱼烧、爪印曲奇、糖霜撒到过量的巧克力甜甜圈、一块切好的蛋糕、蛋糕棒棒糖，还有一杯焦糖布丁。架子上还蹲着一只完整的猫咪主题蛋糕，需要提前48小时预订。 但她不想让作品变成一个飘在背景上的孤立物体。她想要一个能让人“走进去”的房间。所以画面里还有一块写满饮品的黑板、架子上的瓶瓶罐罐、一盏吊灯、木质柜台，以及一只趴在某人咖啡旁边睡着的店猫——那杯咖啡肯定已经凉透了。 整件作品没有用任何图片，没有SVG，没有canvas，也没有JavaScript。每一根胡须，都是带border-radius的div。 作品里有三处值得琢磨的技术决定： 第一个真正的决策是解决缩放问题。CSS艺术包含成百上千个坐标，如果为每个断点都维护一套变量，想想就是灾难。 所以整个场景被放进了一个容器里： .scene { container-type: inline-size; aspect-ratio: 16 / 10; } 容器内部的一切都用cqw（场景宽度的1%）或百分比来度量。因为高度由宽度推算而来，两个轴会一起缩放。这幅画在320px和1920px下看起来完全一样，只是大小不同，而整幅作品里没有一行媒体查询。 作者也踩了一个坑：在.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.
