# 屏幕适配方案

# Flexible

推荐使用阿里的 Flexible作为移动端屏幕适配方案。首先设置一下 meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">， 然后直接在页面中引入 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 即可。

Flexible 以 iphone6 的屏幕宽度为参考单位，请先与你的设计师对齐。一切皆为 rem，基准值 1rem = 75px。

# 自动换算

使用 pxtorem 插件完成 px -> rem 的自动换算。

1. npm i pxtorem -S
2. 修改 vue.config.js 文件：

const pxtorem = require('postcss-pxtorem')
module.exports = {
    ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    pxtorem({
                        rootValue: 37.5, //75px / 2dpr
                        propList: ['*']
                    })
                ]
            }
        }
    },
}