rem - 自适应布局 二

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

<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容