通过样式代码,能绘制设备屏幕尺寸样式。
目前支持设备样式
- iPhone X (Silver)
- iPhone 8 (Silver, Gold and Space Gray)
- Google Pixel 2 XL (Black)
- Google Pixel (Very Silver, Quite Black and Really Blue)
- Samsung Galaxy S8 (Midnight Black and Coral Blue)
- iPad Pro (Silver, Gold, Rose Gold and Space Gray)
- Surface Pro
- Surface Book
- MacBook (Silver, Gold, Rose Gold and Space Gray)
- MacBook Pro (Silver and Space Gray)
- Surface Studio
- iMac Pro
- Apple Watch
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>
iPhone X
<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-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>
iPad Pro
<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-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>
MacBook Pro
<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-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>
iMac Pro
<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-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>
Apple Watch
<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-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>