移动端开发中，如何设置字体自适应的方法

最新推荐文章于 2023-02-28 16:25:30 发布

沉迷于学习的小胖子

最新推荐文章于 2023-02-28 16:25:30 发布

阅读量728

点赞数 1

本文链接：https://blog.csdn.net/weixin_44552862/article/details/86564677

版权

这是在移动端开发过程中所遇到的字体自适应的问题，我简单的总结了一下

在HTML中设置字体大小

 html{
    font-size: calc(100vw/37.5);
    font-size: -webkit-calc(100vw/37.5);
    font-size: -moz-calc(100vm/37.5);
 }

其中vw是css3中一个新的长度单位，它表示相对于视口的宽度。视口被均分为100单位的vw。 也就是说，在375宽度的屏幕中，1vw相当于3.75px,在320宽度的屏幕中，1vw相当于3.2px。这样的话，对于不同尺寸的屏幕就有了一个统一的单位来衡量了，然后再结合rem计算。这里的1rem等于10px。

使用js代码

$(function(){
    function setRem(){
        var clientWidth=$(window).width();
        var nowRem=(clientWidth/375*10);
        $("html").css("font-size",parseInt(nowRem, 10)+"px");
    };
    setRem();
});