可视化数据统计大屏的屏幕适配

关于数据大屏的屏幕适配，有很多种方法，比如 vw 、rem、百分比、媒体查询......等，这些方法有一个不足就是太麻烦。但是css3中新增的transform，让我们有了一个很好的处理思路:利用缩放来达到屏幕适配，这样有一个好处就是我们不用在对设计稿上的尺寸进行计算或单位转换

一.解析

获取windowde高度，并根据需求设置默认的尺寸，

var clientH = $(window).height();
$('body').css({
   width: 1920,
    height: 1080,
    overflow:'hidden',
    margin:0
});

计算window 和 body 之间高度的比值，设置缩放的因数；

var bi = clientH / $('body').height();
$('body').css('transform','scale('+bi+')');

非全屏模式下因为 ---显示器任务栏的存在---和 ---浏览器中地址栏---的存在，我们的body实际上并没有1080，那么此时我们的宽并不能达到1920。

ba3555fd365c42dba90d456e21d2758d.png

以上这种效果并不是我们想要的，所以为了能看起来正常一点，我们可以给这个body做个水平居中。

var marginLeft = (parseFloat(document.documentElement.clientWidth) - parseFloat($('body').css('width'))*bi)/2;
$('body').css('margin-left',marginLeft+'px');

这样便能达到我们的目的了。

7f55d2540b2c417787ef6d15cba8f4da.png

二.拿来吧你。

注意：为了保证窗口高度发生变化的时候，及时使用屏幕，我们需要做个监听来触发该函数。

    resizePage() {
        var clientH = $(window).height();
        $('body').css({
            width: 1920,
            height: 1080,
            overflow:'hidden',
            margin:0
        });
        var bi = clientH/$('body').height();
        $('body').css('transform','scale('+bi+')');
        var marginLeft =(parseFloat(document.documentElement.clientWidth) - parseFloat($('body').css('width'))*bi) / 2;
        $('body').css('margin-left',marginLeft+'px');
    }