用 CSS 绘制屏幕尺寸

博主： admin
发布时间：2024 年 10 月 07 日
26 次浏览
1987字数
分类：代码笔记

**通过样式代码，能绘制设备屏幕尺寸样式。**

#### [目前支持设备样式](https://github.com/picturepan2/devices.css)

* [iPhone X](https://picturepan2.github.io/devices.css/#iphone-x) (Silver)
* [iPhone 8](https://picturepan2.github.io/devices.css/#iphone-8) (Silver, Gold and Space Gray)
* [Google Pixel 2 XL](https://picturepan2.github.io/devices.css/#google-pixel-2-xl) (Black)
* [Google Pixel](https://picturepan2.github.io/devices.css/#google-pixel) (Very Silver, Quite Black and Really Blue)
* [Samsung Galaxy S8](https://picturepan2.github.io/devices.css/#galaxy-s8) (Midnight Black and Coral Blue)
* [iPad Pro](https://picturepan2.github.io/devices.css/#ipad-pro) (Silver, Gold, Rose Gold and Space Gray)
* [Surface Pro](https://picturepan2.github.io/devices.css/#surface-pro)
* [Surface Book](https://picturepan2.github.io/devices.css/#surface-book)
* [MacBook](https://picturepan2.github.io/devices.css/#macbook) (Silver, Gold, Rose Gold and Space Gray)
* [MacBook Pro](https://picturepan2.github.io/devices.css/#macbook-pro) (Silver and Space Gray)
* [Surface Studio](https://picturepan2.github.io/devices.css/#surface-studio)
* [iMac Pro](https://picturepan2.github.io/devices.css/#imac-pro)
* [Apple Watch](https://picturepan2.github.io/devices.css/#apple-watch)

#### [Google Pixel 2 XL](https://picturepan2.github.io/devices.css/#google-pixel-2-xl)

```
<link rel="stylesheet" href="https://picturepan2.github.io/devices.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://picturepan2.github.io/devices.css/dist/devices.css">
<link rel="stylesheet" href="https://picturepan2.github.io/devices.css/dist/demo.css">

<div class="device device-google-pixel-2-xl">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-06.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>Copy
```

#### [iPhone X](https://picturepan2.github.io/devices.css/#iphone-x)

<div class="device device-iphone-x">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-01.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>Copy
```

#### [iPad Pro](https://picturepan2.github.io/devices.css/#ipad-pro)

<div class="device device-ipad-pro device-gold">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-01.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>Copy
```

#### [MacBook Pro](https://picturepan2.github.io/devices.css/#macbook-pro)

<div class="device device-macbook-pro device-spacegray">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-06.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>Copy
```

#### [iMac Pro](https://picturepan2.github.io/devices.css/#imac-pro)

<div class="device device-imac-pro">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-08.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>Copy
```

#### [Apple Watch](https://picturepan2.github.io/devices.css/#apple-watch)

<div class="device device-apple-watch">
<div class="device-frame">
<img class="device-content" src="https://picturepan2.github.io/devices.css/src/img/bg-08.jpg">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>    
```

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏