移动端适配问题

[haoranZ996]

您好，移动端如何适配？用rem单位不生效，还是固定的大小。所以怎么适配移动端的不同屏幕而等比例的放大缩小

[buuing]

代码和插件版本贴一下

[haoranZ996]

插件版本 "vue-luck-draw": "^3.3.1",
`

<div class="questionBtn" @click="goProblem">

<div class="myPrizeBtn" @click="goMyprize">

<div class="campRuleBtn" @click="goCampRule">

<script> import headComponents from '../components/headComponents' export default { components: { headComponents, }, data () { return { blocks: [ { padding: '10px', background: '#ffc27a' }, { padding: '10px', background: '#ff4a4c' }, { padding: '0px', background: '#fff' } ] } }, methods:{ // 跳转中奖记录页 goMyprize(){ this.$router.push({name:"myPrizeRecord"}) }, // 跳转规则页 goCampRule(){ this.$router.push({name:"campRule"}) }, // 跳转问题反馈页 goProblem(){ this.$router.push({name:"problemFeedback"}) }, } } </script> <style lang="less" scoped> .content{ width: 100%; min-height: 14.5rem; background: #fb4c72; .main{ width: 100%; height: 10.46rem; background-image: url("../image/hzIndexBg.png"); background-size: 100%; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; .wheel{ margin-top: 3.04rem; width: 6.3rem; height: 6.3rem; } .questionBtn{ width:0.52rem; height: 1.82rem; background-image: url("../image/sideBtn.png"); background-size: 100%; background-repeat: no-repeat; position: absolute; right: 0; top:2.02rem } } .btnRow{ width: 100%; height: 0.78rem; margin-top: 0.2rem; display: flex; justify-content: center; .myPrizeBtn{ width: 2.6rem; height: 0.78rem; background-image: url("../image/myPrizeBtn.png"); background-size: 100%; background-repeat: no-repeat; margin-right: 0.5rem; } .campRuleBtn{ width: 2.6rem; height: 0.78rem; background-image: url("../image/campRuleBtn.png"); background-size: 100%; background-repeat: no-repeat; } } } </style>`

[buuing]

我没有看到你有在插件内使用rem属性啊?

[haoranZ996]

<template> <div class="content"> <headComponents></headComponents> <div class="main"> <div class="wheel"> <LuckyWheel width="6.3rem" height="6.3rem" :blocks="blocks" /> </div> <div class="questionBtn" @click="goProblem"> </div> </div> <div class="btnRow"> <div class="myPrizeBtn" @click="goMyprize"></div> <div class="campRuleBtn" @click="goCampRule"></div> </div> </div> </template>

[buuing]

好的, 我去看一下源码, 稍等

[haoranZ996]

嗯呢 辛苦了

[xjccc]

可以问个问题吗。vue2的全局组件，怎么在vue3中注册。

[buuing]

可以问个问题吗。vue2的全局组件，怎么在vue3中注册。

// vue2.x
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

// vue3.x
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')

[haoranZ996]

好的 我试一下