美文网首页
vue:将px转化为rem,适配移动端vant-UI等框架(po

vue:将px转化为rem,适配移动端vant-UI等框架(po

作者: web前端攻城狮 | 来源:发表于2020-03-26 11:08 被阅读0次

    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, maximum-scale=1, minimum-scale=1, user-scalable=no">
    

    4.安装postcss-px2rem-exclude
    一款 postcss 插件,用于将单位转化为 rem

    npm install postcss-px2rem-exclude --save
    

    5.配置postcss-px2rem-exclude
    新建一个文件postcss.config.js , 750px的设计稿,过滤mode_modules/i的包 不转换

    module.exports = {
        plugins: {
            autoprefixer: {},
            "postcss-px2rem-exclude": {
            "remUnit": 75,
            exclude: /node_modules/i
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:vue:将px转化为rem,适配移动端vant-UI等框架(po

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