根据屏幕大小动态设置字体rem


1.根据屏幕大小动态设置字体rem

var docEl = document.documentElement,
    //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当然窗口的变化,一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        let maxWidth = 750
        let cw = docEl.clientWidth>maxWidth ? maxWidth : docEl.clientWidth
        docEl.style.fontSize = 10 * (cw / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM