基于vue-cli配置lib-flexible + rem,实现移动端自适应

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码,引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem

build/utils.js中:
增加红色部分

 

其他

1.对css中文字样式增加/* px */后缀,会编译出适应不同dpr的字号:

.text{
    font-size: 28px; /* px */
}
// 会被编译成如下:

    [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
        font-size: 14px;
    }

    [data-dpr="2"] .text {
        font-size: 28px;
    }

    [data-dpr="3"] .text {
        font-size: 42px;
    }

2.对边框样式增加/* no */后缀,会保持原样:

.box{
    border: 1px solid #fff; /* no */
}
// 会被编译成如下:
.box{
    border: 1px solid #fff;
}

3.对不同dpr选择不同的图片

// 背景图片
@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值