flexible.js移动端适配字体大小设置

Question

用flexible.js做移动端适配，结构搭建用rem，按建议，字体写死，用px，但是当切换三星等安卓设备data-dpr="1"时，字体变得很大，影响结构。这字体到底应该怎么设置？

iphone6显示正常

三星

Answer 1

你可以看看是不是这个问题 链接

Answer 2

flexible.js 当mate没写死的时候，安卓设备不会进行mate设置，都是data-dpr="1"
修改flexible.js

if (!dpr && !scale) {
// var isAndroid = win.navigator.appVersion.match(/android/gi);
// var isIPhone = win.navigator.appVersion.match(/iphone/gi);

    var devicePixelRatio = win.devicePixelRatio;
    var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
    //对于返回dpr进行判断 只判整数的  小数的就不管了
    if (isRegularDpr) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

主要是安卓会有各种dpr的出现 控制起来很麻烦 所以字体还是用rem写写算了
或者你就把mate写死

Answer 3

直接用rem比较方便。如果用px作单位的话，需要针对不同dpr做单独处理，1px大小除外。

Answer 4

可以通过预处理器

@mixin font-dpr ($font-size) {
    font-size: $font-size;
    [data-dpr=2] & {
        font-size: $font-size * 2;
    }
    [data-dpr=3] $ {
        font-size: $font-size * 3;
    }
}

// 引用
h1 {
    @include font-dpr([dpr为1时候的值])
}

Answer 5

你可能是在iPhone6下调试开发的，使用了iPhone6的设计稿，字体使用px，但是要根据dpr来设置不同的字体大小，flexible.js会根据设备设置相应的data-dpr.

div {
    font-size: 12px;
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

Answer 6

解决了吗 我也遇到这个问题 上面的回答试了不行呀