美文网首页
rem - 自适应布局 二

rem - 自适应布局 二

作者: 银角大王__ | 来源:发表于2018-01-25 17:11 被阅读0次

    出现如下图 :   一屏幕显示不完  

    <script>

     /**

        * 根据屏幕尺寸,调整文案大小

        */

        initPageScale();

        function initPageScale() {

            var width = document.documentElement.clientWidth;

            var height = document.documentElement.clientHeight;

            //设置一个最小值,防止当浏览器里有top和bottom条时候,缩放比例太小

            if (height < 520) {            //height = 520;

            }

            var ratio = 1;

            var clientRatio = height / width;

            var standardRatio = 1325 / 750; //视觉基准

            if (clientRatio < standardRatio) { //扁屏幕要进行缩放处理

                ratio = clientRatio / standardRatio;

    }

            // var docuW = document.documentElement.clientWidth,

    //    abc = docuW / 750 * ratio;

    // document.getElementsByTagName('html')[0].style.fontSize = abc * 100 + 'px';

    // document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth / 750) * 100 + "px";

            document.getElementsByTagName('html')[0].style.fontSize= (document.documentElement.clientWidth/ 750 * ratio) * 100 + "px";

    }

    </script>

    相关文章

      网友评论

          本文标题:rem - 自适应布局 二

          本文链接:https://www.haomeiwen.com/subject/zhavaxtx.html