vue移动端如何做适配代码

Vue移动端适配主要涉及到屏幕尺寸、DPI、像素密度等方面的问题，下面我提供两种常用的适配方案：

1. 使用Flexible + rem布局方案

Flexible + rem布局方案是一种比较流行的移动端适配方案，主要原理是将屏幕分成10份，用html的font-size来表示1份的宽度，然后使用rem单位进行布局，通过动态改变html的font-size适配不同的屏幕宽度。

具体实现步骤如下：

1）安装 flexible 和 postcss-pxtorem

npm install lib-flexible postcss-pxtorem --save

2）在 main.js 中引入 flexible

import 'lib-flexible/flexible'

3）在项目根目录下创建postcss.config.js

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 75, // 1rem = 75px，75是设计稿宽度的1/10
            propList: ['*']
        }
    }
}

4）在App.vue中设置样式

<style lang="scss">
    html {
        font-size: 50px; // 设计稿宽度的1/10
    }
    body {
        font-size: 14px;
        color: #333;
        margin: 0;
        padding: 0;
    }
</style>

2. 使用vw/vh单位进行布局

vw/vh单位是相对视口宽度和高度的单位，1vw表示视口宽度的1%，1vh表示视口高度的1%。利用vw/vh单位进行布局，可以实现简单的适配效果。

具体实现步骤如下：

1）在项目根目录下创建postcss.config.js

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            viewportWidth: 750, // 设计稿宽度
            viewportHeight: 1334, // 设计稿高度
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,
            mediaQuery: false
        }
    }
}

2）在App.vue中设置样式

<style lang="scss">
    html, body {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 14px;
        color: #333;
    }
    .container {
        width: 100vw;
        height: 100vh;
        padding: 20vw;
        background-color: #eee;
    }
</style>

以上是两种常用的Vue移动端适配方案，具体选择哪种方案可以根据项目实际情况进行选择。