移动端开发中，如何使字体自适应？

Posted 2021-05-14 遇见Time

移动端开发中，为适应不同屏幕尺寸，需要字体根据屏幕大小改变而改变。下列两种方法任选其一即可。
（方法一）CSS3解决
css3提供了一些与当前viewpoint（window size）相关的元素，vw（宽度单位），vh（高度单位）等。

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

原理：让不同尺寸的屏幕有一个统一的单位来衡量。
csl()是一个函数function，calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的宽度。
vw：视口的最大宽度，1vw=视口宽度的百分之一；
vh：视口得最大高度，1vh=视口高度的百分之一；
vmin/vm：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。
-moz-代表火狐浏览器的内核
-webkit-代表谷歌浏览器的内核
（方法二）JS解决

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