devices.css + Vue：用纯 CSS 真机框架重做设备预览

之前用 Canvas 手画 iPhone 外壳，太假了。现在换成 devices.css——一个纯 CSS 的真实设备框架库，刘海、灵动岛、侧键、摄像头这些物理细节全都有。

本文介绍 motai 项目里 device-mockup 功能的改造过程，以及 devices.css 这个纯 CSS 设备框架库的使用方法。

为什么重做

原来的设备预览用 Canvas 手画的，效果很糙：圆角不自然、没有刘海、侧键缺失，一眼就看出是假的。截图放进去之后违和感很强。

换成 devices.css 之后，预览效果接近真实设备照片。完整的圆角边框、屏幕区域、刘海/灵动岛、侧键细节都在，截图填充进去基本可以当真机图用。

devices.css 是什么

devices.css 是一个纯 CSS 实现的设备框架库，不依赖任何 JavaScript。它用 CSS 绘制出各种主流设备的物理外观，包括：

• 刘海 / 灵动岛
• 侧边按键（电源键、音量键）
• 摄像头模组
• 屏幕区域（可填充内容）
• 设备阴影和质感

因为纯 CSS 实现，渲染速度快，放大缩小也不会失真，比 Canvas 位图绘制清晰得多。

支持的设备

目前接入了 10 种真机框架，覆盖主流 Apple 和 Android 设备：

功能

device-mockup 页面提供完整的截图处理流程：

• 拖入截图：从剪贴板或文件拖入，自动填充到屏幕区域（cover 模式，自动裁剪适配）
• 实时预览：CSS 框架所见即所得，带真实阴影效果
• 背景色：取色器自定义背景色，支持透明棋盘格
• 缩放：30% - 120% 无级调整
• 导出：html-to-image 生成 2x 高清 PNG，可直接用于 App Store 截图或推广素材

技术实现

整体方案很直接：

devices.css 的接入成本很低，引入 CSS 文件后，把截图放到 .device-screen 容器里就行。颜色和型号通过修改 CSS 变量切换，不需要重新渲染。

使用场景

重做之后主要用在两个地方：

1. App Store 截图：把 App 界面截图放进 iPhone 16 Pro 框架，配上背景色，导出高清 PNG，直接上传
2. 推广素材：产品介绍文章、社交媒体分享时，真机框架比裸截图更有质感

之前用 Canvas 画的时候，每次换个设备型号要重新调整一堆参数。现在切个 CSS class 就行，省事很多。

项目地址

• devices.css GitHub：https://github.com/aesarius/devices.css