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 设置的变化呈直线变化，每次屏幕变化字体大小都会发生改变
