vue 使用 lib-flexible + postcss-pxtorem + vantUi实现移动端适配

淇淇包.

已于 2023-06-02 15:35:08 修改

阅读量356

点赞数 2

文章标签： vue.js postcss 前端

于 2023-06-02 15:19:44 首次发布

本文链接：https://blog.csdn.net/weixin_45183187/article/details/131006580

版权

1.安装 lib-flexible（可伸缩布局）

 npm install lib-flexible --save

2.安装 postcss-pxtorem（将像素单位转化为 rem ）

npm i postcss-pxtorem --save-dev

3.在main.js中文件引入lib-flexible

import 'lib-flexible'

4.修改根目录下的index.html 头部 meta代码（手机端适配）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no" />

5.添加配置信息

（如果脚手架工具没有创建 .postcssrc.js 文件，就在根目录下新建.postcssrc.js，并添加以下配置。）

module.exports = {
    plugins: {
        'postcss-pxtorem': {
         /*
           rootValue是根据设计稿宽度除以10进行设置。
           如果移动端设计稿是750宽，那么rootValue为750/10=75。
           像vant ui等第三方UI框架没有兼容rem所用单位为px。则需要动态设置rootValue的值
          （750px）75的一半，即可以1:1还原vant的组件，否则会样式会有变化，例如按钮会变小等。
         */
            rootValue(res) {
                return res.file.indexOf('vant') !== -1 ? 37.5 : 75
            },
            propList: ['*','!border']  //除border外的所有元素都转换

        }
    }
}