这是在移动端开发过程中所遇到的字体自适应的问题,我简单的总结了一下
在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();
});
这段代码是利用js实现字体自适应