开发者社区> 问答> 正文

不同设备间 font-size 自适应?

写页面的时候用一个尺寸比如宽度 414,font-size 都是 rem定义的
然后,js根据页面的宽度/414*10px。 不同尺寸的ios设备都可以实现字体缩放
android其实也可以,但是有偏差【比如会换行】貌似会大点……

展开
收起
杨冬芳 2016-06-07 19:10:45 4256 0
1 条回答
写回答
取消 提交回答
  • IT从业

    移动端开发的页面建议是不要使用rem单位来设置字体的大小。因为通过rem方案计算出来的实际像素会有一定的偏差,而且存在小数;例如:
    iphone6 屏幕的宽为375,设置的缩放比为initial-scale = 1.0,计算出 rem 的基准值为 375/10 = 37.5px; 即 1rem = 37.5px。

    iphone6 plus 屏幕的宽为414,设置的缩放比为initial-scale = 1.0,计算出 rem 的基注值为 414/10 = 41.4px; 即 1rem = 41.4px。

    当你要设置一个 16px 的字体的时候,换算成rem的方案在 iphone6 下就是 16/37.5 = 0.426667rem;在 iphone6 plus 下就是 16/41.4 = 0.386473rem;

    浏览器解析的时候会根据你设置的基准值和设置的rem大小换算成px来显示。

    所以建议不要使用rem来作为单位设置字体的大小。直接使用px来设置;但是要考虑到响应式的问题,所以需要针对不同的屏幕设置字体的大小,建议是结合使用less 或者sass来采用以下方案:

    .px2px(@name, @px){
        @{name}: round(@px / 2) * 1px;
        [data-dpr="2"] & {
            @{name}: @px * 1px;
        }
        // for mx3
        [data-dpr="2.5"] & {
            @{name}: round(@px * 2.5 / 2) * 1px;
        }
        // for 小米note
        [data-dpr="2.75"] & {
            @{name}: round(@px * 2.75 / 2) * 1px;
        }
        [data-dpr="3"] & {
            @{name}: round(@px / 2 * 3) * 1px
        }
        // for 三星note4
        [data-dpr="4"] & {
            @{name}: @px * 2px;
        }
    }
    
    .demo{
        .px2px(font-size, 14);
    }

    编译后输出

    [data-dpr="2"] .demo{
      font-size: 28px;
    }
    [data-dpr="2.5"] .demo{
      font-size: 35px;
    }
    [data-dpr="2.75"] .demo{
      font-size: 39px;
    }
    [data-dpr="3"] .demo{
      font-size: 42px;
    }
    [data-dpr="4"] .demo{
      font-size: 56px;
    }

    有个不好的缺点,就是编译后会有比较多的代码。

    如果觉得以上的说明还没解决你的问题可以看看 淘宝的移动端自适应方案

    知识补充 http://div.io/topic/1092

    2019-07-17 19:30:48
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载