# 如何配置响应式
为了满足不同环境下对响应式的需求, 我特意针对以下几个常用单位做了适配
| 环境 | 支持的响应式单位 |
|---|---|
| 浏览器端 | rem / vw |
| 小程序端 | rpx |
注意
你不要把 rem 或 vw 或 rpx 单位加在你自己的 style 样式或 css 文件中, 而是要在组件中传递给我, 因为 canvas 的宽高不能通过 css 设置, 需要我在内部去设置
下面以大转盘抽奖为例, 其余抽奖类型配置方式一致
<script>
const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
width: '10rem',
height: '10rem',
...你的配置项
})
</script><template>
<LuckyWheel
width="10rem"
height="10rem"
...你的配置项
/>
</template>render () {
return <LuckyWheel
width="10rem"
height="10rem"
...你的配置项
/>
}为什么不支持百分号单位?
主要是考虑到小程序端无法获取父级元素的宽度, 为了保持多端一致性做出的妥协, 同时也相信上面这几个响应式单位完全可以满足你的需求
除了设置抽奖组件的宽高之外, 我内部的其他属性也同样支持上面的响应式单位, 比如:
{
width: '1vw', // 宽度
top: '30%', // 距离顶部的高度
fontSize: '2rem', // 字体大小
gutter: '0.5rem', // 格子缝隙
}
我只是简单举了几个例子, 更多的属性可以查阅文档
理论上来说, 只要是可以配置 'px' 单位的属性, 就可以设置响应式单位
padding 属性除外, 这个属性我忘了处理了