CSS中 字体大小随屏幕大小自适应变化

1、通过媒体查询的方式

@media (min-width:0px){
    html{font-size:12px;}
}
@media (min-width: 320px){
    html{font-size:12px;}
}
@media (min-width: 340px){
    html{font-size:13px;}
}
@media (min-width: 360px){
    html{font-size:14px;}
}
@media (min-width: 380px){
    html{font-size:15px;}
}
@media (min-width: 400px){
    html{font-size:15px;}
}
@media (min-width: 420px){
    html{font-size:16px;}
}

2、页面插入js

<script type="text/javascript">
    function fontSize(){
        var deviceWidth=document.documentElement.clientWidth>760?760:document.documentElement.clientWidth;
        document.documentElement.style.fontSize=(deviceWidth/76)+"px";
    }
    fontSize();
    window.onresize=fontSize;
</script>

相同点：
 两种方法的原理都是通过 根据屏幕大小来 改变根元素 html 中 font-size 的值
 然后我们元素的字体大小 使用rem为单位，就可以随着屏幕的大小而变化

不同点：
 媒体查询的自适应变化呈 阶梯式变化，要达到固定的值才变化一次
 通过 js 设置的变化呈直线变化，每次屏幕变化字体大小都会发生改变