自适应

 

rem自适应

注：不管放大缩小，元素大小始终不变。设定根元素的font-size大小，具体元素或模块使用rem或em单位

 

(function (win, doc) {
    var fres = function () {
        var html = doc.documentElement;   
        var w = html.clientWidth;
        w && (html.style.fontSize = 10 * (w / 375) + "px"); 
    }
    if (document.readyState === 'complete') {
        fres();
    } else {
        document.addEventListener('DOMContentLoaded', fres, false);
    }
    window.addEventListener('resize', fres, false);
})(window, document) //自适应 √

 

 

 

大屏自适应

注：任何分辨率下，宽度，高度始终占满浏览器，不产生滚动轴

 

<div id="DataPlatForm">
        <div class="viewport">
        </div>
</div>

body {
     width: 100vw;
    height:100vh;
    line-height: 1.15;
    font-size: 0.5rem;
    font-family: PingFang SC;
    margin: 0;
    padding: 0;
}
#DataPlatForm {
    width: 100%;
    height: 100%;
    background-size:100% 100%;
    background: url(/Content/DataPlatform/images/bg@2x.png) no-repeat 0 0 / cover;
}

js实现高度始终全屏

function setHeight() {
            let wondowHeight = ($(window).height() - 30) / ((document.documentElement.clientWidth) / 375 * 10)
            let contentgridHeight = (wondowHeight - 0.9 ) / 2 + 'rem'
            $('.userInfo').css({ 'height': contentgridHeight })
            $('.numberInfo').css({ 'height': contentgridHeight })
            $('.weekData').css({ 'height': contentgridHeight })
            $('.missCall').css({ 'height': contentgridHeight })
            $('#chartmain').css({ 'height': contentgridHeight })
        }
        (function (win, doc) {
            var fres1 = function () {
                setHeight()
                echarts.init(document.getElementById('chartmain')).resize()
            }
            if (document.readyState === 'complete') {
                fres1();
            } else {
                document.addEventListener('DOMContentLoaded', fres1, false);
            }
            window.addEventListener('resize', fres1, false);
        })(window, document) //高度自适应 √