rem - 自适应布局 二

2018-01-25  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读