【JavaScript】真正实现网页字体大小跟随屏幕变化而变化

方法一：

    使用媒体查询Media获取屏幕宽度，根据不同屏幕下情况，给元素赋值不同字体大小，

     @media screen and (min-width:640px){
         .IRYFloat P{
             font-size: 3.0rem;
         }
     }

  方法二：利用JS动态变化调整：

<script type="text/javascript" >
    /*网页字跟随页面自动变化*/
     function setRem(){
         /*获取当前页面的宽度*/
         var width = document.body.offsetWidth;
         /*设置页面的字体大小*/
         var nowFont=width/375*20;
         /*通过标签名称来获取元素*/
         var htmlFont=document.getElementsByTagName('html')[0];
         // 给获取到的元素的字体大小赋值
         htmlFont.style.fontSize =nowFont+"px";
     }
      setRem();
      window.onresize=setRem;  //监听屏幕变化
</script>

  注意：实践证明，还是需要慎重使用，特别在移动端页面；最好还是用媒体查询去适配；

  出现的问题： 屏幕过大，导致设置的字体够大，影响显示；

  【2019.02.27】移动端的字体自适应操作  【通过rem进行设置】

 <p id="wxh" oncopy="actionCopy()">iryclub</p>
        #wxh{
            position: absolute;
            left: 24.1%;
            top: 43%;
            width: 51%;
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            /*border: 1px solid red;*/
        }

<script type="text/javascript" >
    window.onload = function(){setRem();};
    window.onresize = function(){setRem();};
    /*设置字体rem*/
    function setRem(){
        /*获取当前页面的宽度*/
        var width = document.body.offsetWidth;
        /*设置页面的字体大小*/
        var nowFont=width/375*20;
        /*通过标签名称来获取元素*/
        var htmlFont=document.getElementsByTagName('html')[0];
        // 给获取到的元素的字体大小赋值
        htmlFont.style.fontSize =nowFont+"px";
    }
</script>