纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia

分享•11个月前• 隔壁老李于 2021-09-09 09:32:07 最后编辑

devices.css是一个纯css实现的移动设备模型项目

机型包含iPhone系列/iPad mini/MacBook Pro/Galaxy Note 8/HTC One/Lumia920等

多种颜色样式可选。

纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia 第1张

纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia 第2张

纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia 第3张

纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia 第4张

只需要引入CSS并复制需要的HTML即可在网页展示一个设备模型。

引入devices.min.css

<link rel="stylesheet" href="devices.min.css" type="text/css">

从index.html或演示网站中选择需要的设备，点击 Grab the code 生成html代码

纯CSS实现的移动设备模型，包含 iPhone/iPad/MacBook Pro/Android/Lumia 第5张

复制到自己的项目即可

赞赏

我还是很喜欢微软的手机系统的，可惜没活下来。。

2021-09-09 11:17:22 · 来自河北省石家庄市 · 回复

@沉冰浮水表示抽屉里还有一块电池坏了的lumia1020

2021-09-09 20:06:13 · 来自IANA · 回复

你可能感兴趣的

今天看到拓源的ZBLOG群里有人问为什么纯净主题的footer不在最底部。看了一下截图，发现是因为他的文章太少了，content部分不够多，于是在页面下方会留出部分的空白比较暴力的解决办法就是给主体部分加一个最小高度比如：section { &...

技巧 • 2022-06-10

details是HTML5新增的一个有趣又没用的标签，因为它兼容性实在有点差，按照百度来的说法，details只兼容Chrome, Safari 8+ ，Opera 26+details标签用于描述文档或文档某个部分的细节，更容易理解的一种用法：折叠菜单例...

技巧 • 2022-06-01

项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的 CSS代码。或者扒站的时候，有时候只是想扒一点小地方，如果一点一点的扒对应的CSS也是不小的工作量。这时候UnCSS-Online这个神器就派上用场了。打开网址：...

源码 • 2019-11-11

Top