> 原创文章 > Vue 移动端适配方案,淘宝弹性布局方案(lib-flexible + px2rem-loader)

Vue 移动端适配方案,淘宝弹性布局方案(lib-flexible + px2rem-loader)

原创文章 hmin 2020-11-04 11:08:36 67 阅读 0 评论

简介 vue-cli 3 脚手架构建的项目移动端适配

一、Vue使用淘宝弹性布局方案 lib-flexible

    1. 项目安装lib-flexible插件

        npm install lib-flexible --save

    2. 在main.js中引入插件

        import 'lib-flexible/flexible'

    3. 在public/index.html文件中删除默认的<meta name="viewport" content="width=device-width,initial-scale=1.0">,因为lib-flexible会自动生成此标签来达到适配的效果,如果此默认标签不删除,则无法达到适配效果。

   *完成以上这3个步骤,就已经自适应移动端分辨率了


    需要注意的是:

    默认生成的<meta>标签会自动设置html的font-size为屏幕宽度除于10,也就是10rem就是屏幕的宽度。例如设计稿是以iPhone 6宽度设计的750px,则1rem等于75px,350px等于5rem。

    但这样就会导致每次都需要手动去计算px等于多少rem,所以可以使用px2rem-loader插件来将css中的px自动转换为rem。


二、使用px2rem-loader插件将px转换为rem

    1. 安装px2rem-loader插件

        npm install px2rem-loader --save-dev

    2. 在项目根目录新建vue.config.js文件,复制以下代码

        module.exports = {

            chainWebpack: config => {

                config.module

                .rule('css')

                 .test(/\.css$/)

                 .oneOf('vue')

                 .resourceQuery(/\?vue/)

                 .use('px2rem')

                 .loader('px2rem-loader')

                 .options({

                    remUnit: 75       // 75就是对应你设计稿的宽度/10

                 })

            }

        }


    注意: 如果Vue项目中使用了scss预处理则需要使用这段代码

        module.exports = {

         chainWebpack: config => {

     config.module

     .rule('scss')

     .oneOf('vue')

     .use('px2rem-loader')

     .loader('px2rem-loader')

     .before('postcss-loader') // this makes it work.

     .options({

         remUnit: 75,

         remPrecision: 8

     })

     .end()

         }

        }