GitCode 开源社区

项目背景：屏幕自适应问题，当在不同分辨率的屏幕上显示页面时，页面的字体需要根据屏幕大小来自适应，想到使用rem作为字体的单位

vue-cli脚手架下的index.html中写入以下js脚本

<script>
  document.documentElement.style.fontSize=document.documentElement.offsetWidth/60+"px"
</script>

注：除以60的原因是我当时的电脑分辨率为1920*1680；1920/60=32; 所以使用的$r就要设置为32

scss文件中使用：
$r:32;

p{
  color: $em-text-color-base;
  margin: 5px;
  font-size: 16/$r+rem;  //这里计算出来的结果就是0.5rem;
  text-indent: 5px;
}

通过以上方法确实可以实现字体自适应屏幕大小，有个很XX的问题就是当浏览器窗口缩小或者原本小窗口的放大窗口后字体还是原来的大小，即改变窗口大小后需要手动刷新页面，字体才会自适应页面，这是个很不友好的现象。于是我想到需要一个方法来监听浏览器的窗口，实时获取窗口大小不要每次都刷新页面。


方法改进：（依然在index.html页面中写js脚本）

<script>
  function placeholderPic(){
    document.documentElement.style.fontSize=document.documentElement.offsetWidth/60+"px"; //同上
  }
  placeholderPic();
  window.οnresize=function(){  //窗口改变时再次执行一次函数即可
    placeholderPic();
  }
</script>

通过以上方法即可实现页面字体的自适应。随意改变浏览器窗口大小，字体大小也能实时变化；需要注意的是，元素的字体都需要加上font-size属性，否则是没有效果的额！！！！！