一款通过纯 CSS 代码实现手机（iphone 系列、Google 系列）、电脑（MacBook、SurfaceBook 系列）等各类设备样式效果。
- 🎨 多设备: 提供多种设备样式，像 iPhone 系列、MacBook、Apple Watch。
- 🚧 跨框架: 完全基于纯 CSS，vue\react\原生均可使用，超易用。
- 🪄 灵活可定制: 内容区域支持自定义，满足个性化需求。
- 🧱 丰富特性: 开箱即用的颜色和组件
<!DOCTYPE html>
<head>
<!-- src: iDevices cdn 链接 -->
<script type="module" src="./iDevices.js"></script>
</head>
<body>
<i-devices></i-devices>
</body>yarn add i-devicesimport React from 'react';
import { IDevicesReact } from 'i-devices';
export default function () {
return (
<div>
<IDevicesReact></IDevicesReact>
</div>
);
}yarn add i-devices<template>
<div>
<i-devices></i-devices>
</div>
</template>
<script>
import 'i-devices';
</script>更多使用方式，详见设备详情和使用 API
import { IDevicesReact } from 'i-devices';
import React from 'react';
export default function () {
return (
<div style={{ width: '350px', margin: '0 auto' }}>
<IDevicesReact modelcolor="device-silver" scale={0.9} />
</div>
);
}纯 CSS 代码实现手机、电脑等各类设备样式效果（Modern devices crafted in pure CSS）
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelname | 设备名称 | string (device-iphone-x | device-iphone-14| device-macbook\ 等等) | device-iphone-14-pro |
| modelcolor | 外壳颜色（详见详情） | string (device-gold | device-purple| device-silver\ 等等) | 默认 |
| scale | 缩放 | string (0 - 1) | 1 |
| modelbar | 展示手机 tabbar 导航栏 | boolean | false |
| bartitle | 导航标题 | string | 标题 |
| usezoom | transform 改用 zoom 进行缩放 | boolean | false |
支持设备内容自定义，slot="slot-screen"
<IDevicesReact
modelname="device-iphone-14-pro"
modelcolor={actColor}
scale={scale}
>
<img
slot="slot-screen"
className="device-screen"
src="/img/bg-iphone-14-pro.jpg"
loading="lazy"
/>
</IDevicesReact>根源查看
原因：position: fixed 会受到父级上的 transform 的影响，导致位置不准确。
fixed：开启 usezoom，去除 transform 缩放，改用 zoom 缩放。 或者可以将拖动项移动到 DOM 的另一个位置(document.body)
如果在使用过程中发现任何问题、或者有改善建议，欢迎在 GitHub Issues进行反馈
The MIT License.