大屏可视化(二)：Scale同比缩放视图

在高分屏中，修改浏览器的缩放比例，其实就是修改浏览器的DPI，即单位面积内可用的像素点数，从而在屏幕尺寸保持不变的情况下，达到了改变视窗宽高的效果(用像素计量)，简单来说，放大比例会减少DPI，宽高变小，减少比例会增加DPI，宽高变大。

总的来说，通过修改浏览器的缩放比例来适应分辨率，是一种最经济的做法(不需要编写任何代码)，唯一的缺点在于需要手动调节，导致难以找到最合适的缩放比例。

今天再介绍利用CSS的scale来达到同比缩放的效果，操作的步骤如下：
1. 首先将容器的比例缩小，这样容器的尺寸就会较小，内容刚好能够填满容器；
2. 再内容渲染完成后，再按同比例放大，这样容器就刚好铺满整个大屏。

具体CSS代码如下：

/* 缩小一半空间，用于适应高分屏 */.flux-container {    position: absolute;    width : 50%;    height : 50%;    background-color: #255625;    /* 因为scale是基于中心放大的，所以还需要改变位置*/    left : 25%;    top : 25%;    min-width : 400px;    min-height : 300px;}/* 放大显示比例，用于铺满整个屏幕 */.flux-scale {    transform: scale(2.0, 2.0);}

具体布局代码如下：

 <div class="flux-container flux-scale">            <div class="container-fluid">                <div class="row">                    <div class="col-xs-6">                        <section class="panel panel-default">                            <header class="panel-heading">                                同比放大1                            </header>                            <div class="panel-body">                                <p>select与selectAll返回的结果都是d3的选择集合,并且都能进行集合运算,唯一不同的是集合的数量,select的数量恒小于等于1</p>                            </div>                        </section>                    </div>                    <div class="col-xs-6">                        <section class="panel panel-default">                            <header class="panel-heading">                                同比放大2                            </header>                            <div class="panel-body">                                <p>select与selectAll返回的结果都是d3的选择集合,并且都能进行集合运算,唯一不同的是集合的数量,select的数量恒小于等于1</p>                            </div>                        </section>                    </div>                </div>            </div>        </div>

最后显示的效果如下，完全能够达到与缩放浏览器比例的效果，并且还可以添加程序检测分辨率代码，达到通过程序控制最佳显示比例的效果。