美文网首页vueVUE
px2rem-loader(Vue:将px转化为rem,适配移动

px2rem-loader(Vue:将px转化为rem,适配移动

作者: 风中凌乱的男子 | 来源:发表于2019-01-28 18:13 被阅读119次

    1.下载lib-flexible

    使用的是vue-cli+webpack,通过npm来安装的

    npm i lib-flexible --save

    2.引入lib-flexible

    在main.js中引入lib-flexible

    import 'lib-flexible/flexible'

    3.设置meta标签

    通过meta标签,设置设备宽度以及缩放比例

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    4.安装px2rem-loader

    npm install px2rem-loader

    5.配置px2rem-loader

    这里是重要的一步~~

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

    同时,在generateLoaders方法中添加px2remLoader

    6.重启,一切ok~

    当配置完之后,只需要重启下服务,就自动转化为rem了

    npm run dev

    相关文章

      网友评论

        本文标题:px2rem-loader(Vue:将px转化为rem,适配移动

        本文链接:https://www.haomeiwen.com/subject/tkqzjqtx.html