根據屏幕寬度設定文字大小

根據屏幕寬度設定文字大小的方法：

1.css3媒體查詢：

    <style>
        @media screen and (max-width: 320px) {
            body {
                font-size: 14px;
            }
        }
        @media screen and (max-width: 480px) and (min-width: 321px) {
            body {
                font-size: 18px;
            }
        }
        @media screen and (max-width: 720px) and (min-width: 481px ){
            body {
                font-size: 22px;
            }
        }
        @media screen and (max-width: 800px) and (min-width: 721px ){
            body {
                font-size: 26px;
            }
        }
    </style>

　　2.使用JS方法：

　　a.根據屏幕寬度設定字體

    <script>
        function textSetting(){                  //根據屏幕寬度設定字體大小
            var root = document.documentElement; //獲取屬性根節點
            var w = root.clientWidth;            //獲取屏幕寬度
            var fs = w <= 320 ? 14 : w >320 && w <= 480 ? 18 : 22;   //判斷文字大小
            root.style.fontSize = fs + "px";
        }
        textSetting(); 
    </script>

　　b.根據屏幕寬度計算文字大小

　　<script>
        function textSetting(minWidth,maxWidth){   //根據屏幕寬度計算字體大（14~35px）
            let maxfs = 35;                        //最大字體
            var root = document.documentElement;
            var w = root.clientWidth;
            w = w > maxWidth ? maxWidth : w <minWidth ? minWidth : w;
            var fs = w / maxWidth * maxfs;
            root.style.fontSize = fs + "px";
        }
        textSetting(400,800);
　　</script>