22款CSS手机电脑设备样机代码包

做自媒体、做电商、做小程序的人，几乎都绕不开一类图——把做好的页面或者应用界面”装”进一台手机、一台电脑里，做出来的展示图才像样。可真去搜样机素材就发现了，要么收费，要么带水印，要么给的是一张死图片，尺寸一改就糊。这套东西正好解决这个问题，它里面一张图片都没有，全是代码，你想怎么改就怎么改。

纯代码画出来的样机，不带一个图片文件

这个包的核心是一个叫 devices.css 的样式库，用 CSS 把设备的机身、刘海、摄像头、按键和屏幕区域一笔一笔”画”出来。因为是代码生成，所以放大不糊、颜色随便换、尺寸随便调，导出来的展示图放在手机还是电脑上看都清晰。整个包压完只有几十 KB，塞进任何网页项目都不会拖慢速度，也不占空间。

一共 22 款机型，手机到手表全覆盖

里面覆盖的机型挺全：手机有第一代 iPhone、iPhone 8、iPhone X、iPhone 14 和 iPhone 14 Pro，安卓这边有三星 Galaxy S8 和 Google Pixel 系列；平板有 iPad Pro、iPad Pro 2017、Surface Pro、Surface Book、Surface Studio；电脑和显示器有 MacBook、MacBook Pro、MacBook Pro 2018、iMac、Pro Display XDR；配件那头还有 HomePod 和两款 Apple Watch。做展示图常用的机型基本都在里面了。

三步就能出图，不用学设计软件

第一步，把包里的样式文件引到你自己的页面里；第二步，复制一段设备结构代码；第三步，把你自己的内容塞进屏幕区域——放图片、放文字、放网页链接都行，想换机型就把类名改一下。包里带了一个演示页，双击用浏览器打开，22 款机型一屏全看到，看中哪个直接抄那段代码，改完刷一下就出效果。

这几个场景最用得上

最直接的是小红书封面和公众号头图，把笔记截图”装”进手机里，封面立刻有质感；做电商的可以拿它做商品详情页的场景图，比干巴巴贴一张截图强；做小程序或者独立开发的人，作品集、落地页里放一台笔记本或者手机样机，整体显得专业不少。做课程封面、视频封面也都能直接用。

资源基于开源项目 devices.css 整理，MIT 协议，允许免费商用和二次修改，包里附了完整的协议原文，保留那个文件就行。整个包不含任何第三方字体和图片素材，拿来就能用，没有额外的授权负担。