字体随页面大小变化

    <div class=“testDiv”>测试字测试字测试字测试字测试字</div>

1、css方法：

    .testDiv{
        display:flex;
        justify-content:space-around;
        background: royalblue;
        color: #fff;
        width: 400px;
        padding: 20px;
        font-size: 20px;
        /*最大显示字体，可以不设置*/
    }

注意：当meta标签content里面设置了“user-scalable=no”缩放会失效。

2、js方法：

    setFontSize();
    window.onresize = setFontSize; //实时监听
    function setFontSize(){
        var width = document.body.offsetWidth;
        var newSize = width/375*20;  
        //不知道为什么是375和2倍的可以去看看“逻辑像素和物理像素”的相关内容
        var setHtml=document.getElementsByTagName('html')[0]; //通过根元素设置
        setHtml.style.fontSize = newSize+"px";
    }

还有一种通过元素的视窗位置集合getBoundingClientRect()来更更改的：

   function setFontSize(){
        var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
        var setHtml=document.getElementsByTagName('html')[0]; 
        view_width > 640 ? setHtml.style.fontSize = 640/16 +"px":setHtml.style.fontSize = view_width/16+"px";
    }

注意：js方法可能造成宽屏，字体太大。所以最好对元素单独再设置字体大小，限制最大：

    .testDiv{
        font-size: 20px;
    }

3、media方法：

    html {
        font: bold 12px/1.5 Helvetica,sans-serif;
    }

    @media (min-width: 480px) {
       html {
         font: bold 13px/1.5 Helvetica,sans-serif;
       }
    }
    
    @media (min-width: 768px) {
       html {
         font: bold 16px/1.5 Helvetica,sans-serif;
       }
    }
    
    @media (min-width: 992px) {
       html {
         font: bold 30px/1.5 Helvetica,sans-serif;
       }
    }

    @media (min-width:1200px) {
       html {
         font: bold 40px/1.5 Helvetica,sans-serif;
       }
    }

注意：如果需要兼容很多设备，这样写比较繁琐，拉动窗口变化大小时，字体大小跳动也比较大显得不够流畅。不能直接写 fontSize: 16px/1.5，这种是错误的。16px是字体大小，1.5是1.5em的行高。

4、插件方法：
比如阿里淘宝使用的flexible.js【指路：GitHub amfe-flexible】