移动端app屏幕适配

我们在开发移动端项目时经常会遇到屏幕适配问题，一般有两种适配方式：

方式1：vw vh适配

100vw为100%屏宽，100vh为100%高

一般这种方式会有些弊端，所以不太推荐

方式2：rem适配

这种方法可以很好的根据屏宽自动适配， 1rem为屏宽/10 （如750px的设计稿中， 1rem=75px）

在vue项目中使用rem手淘适配步骤：

1. 下载lib-flexible模块儿

npm install lib-flexible --save-dev

然后 在main.js中引入lib-flexible

import "lib-flexible"

2. 下载postcss-px2rem 模块儿 将rem转化为px

npm install postcss-px2rem

然后在项目根目录下创建配置vue配置文件vue.config.js。在vue.config.js文件中添加：

ps:这段代码不需要记下来，用的时候复制就完了。

module.exports = {

    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require("postcss-px2rem")({
                        // 以设计稿为375px 为例 375/10 = 37.5
                        // 表示1rem = 37.5px
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

然后在根据计算将项目中px代替为相应的rem值就可以做到屏幕适配了(若你用的开发软件为vscode那么你可以下载px to rem插件就可以自动将你的px值计算为rem值，就省的自己去计算了）