通过设置rem和em单位适应屏幕大小

2019独角兽企业重金招聘Python工程师标准>>>

/** 
* set 1rem = 10vw, 设置为1vw可能小于字体最小值, 导致无效；
* limit：是否有绝对范围限制；
* begin：字体比例不小于最小绝对像素的最小比例；
* end：字体比例不大于最大绝对像素的最大比例；
* min：字体最小绝对像素值；
* max：字体最大绝对像素值；
*/
function set1RemAs10Vw(limit=false, begin=.3, end=.5, min=12, max=18){
    var w = 0; 
    // ios 9使用innerwidth, 要在meta viewport加上shrink-to-fit=no
    w = document.documentElement.clientWidth 
    if(w){ // ios iframe页面载入的时候innerWidth=0
        var ht = document.getElementsByTagName('html')[0]
        var newFontSize = w/10
        
        // 限制字体绝对最小、最大范围
        if(limit){
            var real_max = max + (max-min)/(end-begin)*(1-end);
            var real_min = min - (max-min)/(end-begin)*(begin-0);
            newFontSize = Math.min(newFontSize, real_max);
            newFontSize = Math.max(newFontSize, real_min);
        }
        
        ht.style.fontSize = newFontSize + 'px'
        var realFontSize = parseInt(window.getComputedStyle(ht).getPropertyValue('font-size'))
        if(newFontSize != realFontSize){ // 处理android浏览器设置根的字体大小的bug
            ht.style.fontSize = newFontSize /(realFontSize/newFontSize) + 'px'
        }
    }
}
set1RemAs10Vw()

/**
* 生成em字体大小的样式，使1em=10vw，但有绝对最小、最大范围。
* limit：是否有绝对范围限制；
* begin：字体比例不小于最小绝对像素的最小比例；
* end：字体比例不大于最大绝对像素的最大比例；
* min：字体最小绝对像素值；
* max：字体最大绝对像素值；
* 使用方法：在需要使用em的地方的上级加上'em'样式
*/
function set1EmAs10Vw(limit=true, begin=.3, end=.5, min=12, max=18){
    
    // 获取屏幕宽度
    var w = 0; 
    // ios 9使用innerwidth, 要在meta viewport加上shrink-to-fit=no
    w = document.documentElement.clientWidth 
    
    var old_style = document.getElementById('set1EmAs10Vw');
    if(old_style){
        old_style.remove()
    }
    var style = document.createElement('style');
    style.id = 'set1EmAs10Vw';
    style.type = 'text/css';
    document.head.appendChild(style);
    
    var real_size = w / 10;
    if(limit){
        var real_max = max + (max-min)/(end-begin)*(1-end);
        var real_min = min - (max-min)/(end-begin)*(begin-0);
        real_size = Math.min(real_size, real_max);
        real_size = Math.max(real_size, real_min);
    }
    
    var style_name = '.em';
    var style_rule = style_name + '{ font-size: ' + real_size + 'px }'
    
    style.sheet.insertRule(style_rule);
}
set1EmAs10Vw()

window.addEventListener("resize", function(){
    set1RemAs10Vw();
    set1EmAs10Vw();
});

运行后，使用rem或em单位进行排版，既可进行等比例排版，又可限制绝对大小。

转载于:https://my.oschina.net/airxiechao/blog/1555333