vue2 九宫格抽奖H5+手机rem自适应方法

 抽奖转盘效果:

vue2 九宫格抽奖H5+手机rem自适应方法_第1张图片

 

 

 

 

奖品布局示意图

htmlIndex 0

定位Index 0

htmlIndex 1

定位Index 1

htmlIndex 2

定位Index 2

htmlIndex 3

定位Index 7

开始

抽奖

htmlIndex 4

定位Index 3

htmlIndex 5

定位Index 6

htmlIndex 6

定位Index 5

htmlIndex 7

定位Index 4

 App.vue 






使用的HbuildX,在设置里设置px转rem比例后可在正常设置px大小后转成对应rem单位大小

 vue2 九宫格抽奖H5+手机rem自适应方法_第2张图片

 比例 = 编写代码是所使用的的尺寸宽度 / 100 (公式由App.vue文件里的公式决定)

 

例:

LuckyDraw.vue






你可能感兴趣的:(笔记,html,vue.js,javascript)