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