你的当前位置: vue 移动端适配

F

vue 移动端适配

  • 发布时间: 2020-04-21 22:20:25

vue 实现 移动端的适配

    1. 安装vue插件 lib-flexible

npm i lib-flexible --save-dev

    2. 在main.js 引入 lib-flexible    

import 'lib-flexible/flexible'

   3. 安装vue 插件 px2rem-loader

npm i px2rem-loader --save-dev

   4. 配置 px2rem-loader       

        在build文件中找到util.js,将px2rem-loader 添加到cssLoaders 下面,如: 

const cssLoader = {     loader: 'css-loader',     options: {        sourceMap: options.sourceMap     }  }              const px2remLoader = {     loader: 'px2rem-loader',     options: {       remUnit: 75     }  }

        75是设计图给的是750的设计图

      

    同时,在generateLoaders方法中添加px2remLoader

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]


    这样就可以了

    

    注意:不要在引入meta标签, lib-flexible 会自动添加

    注意:你写页面的值,写px就可以,px2rem-loader 会自动给你转换rem






    

留言
0/360
加载更多…

备案/许可证编号: 豫ICP备18034271号