移动端页面适配

搜索引擎热搜适配方案—rem适配：

工具：

1.amfe-flexible（原淘宝使用的可伸缩布局方案）

2.postcss-pxtorem(postcss的插件，用于将像素单元生成rem单位)

安装：

• 可以直接下载amfe-flexible到public文件夹下(样例中使用这种)，或者npm i -S amfe-flexible
• 引入

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<script src="/amfe-flexible.js"></script>

• npm install postcss-pxtorem --save
• 同时需要安装， postcss和postcss-loader

注意postcss-pxtorem最新版本会报错，需要postcss8.0支持，然后postcss-loader最新版本会报错，兼容性问题。

所以最后选用

"postcss": "^8.4.12",
"postcss-loader": "3.0.0",
"postcss-pxtorem": "5.0.0",

• 在vue.config.js配置如下：

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

• 在postcssrc.js或postcss.config.js中配置如下：

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

• rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
• propList是设置需要转换的属性，这边*为所有都进行转换。

测试结果：

• UC浏览器中，适配存在严重的问题，甚至页面没有百分比铺满（微信打开无此情况），应该是amfe-flexible出了问题。
• Chrome测试中，少量地方，存在适配不足的情况

最后选择弃用！

适配方案—viewport

工具：

postcss-px-to-viewport

安装：

npm install postcss-px-to-viewport --save-dev

配置：

• 在vue.config.js配置如下：

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px-to-viewport')({
                        viewportWidth: 375,
                    })
                ]
            }
        }
    },
}

• 在postcssrc.js或postcss.config.js中配置如下：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

测试结果：

• Chrome，UC，微信浏览器中，均有良好的适配性
• 标签属性无法转换，例如img标签直接使用width和height标签是无法转换的
• style属性也无法转换