大屏可视化(二):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的数量恒小于等于1p>
                            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的数量恒小于等于1p>
                            div>
                        section>
                    div>
                div>
            div>
        div>

最后显示的效果如下,完全能够达到与缩放浏览器比例的效果,并且还可以添加程序检测分辨率代码,达到通过程序控制最佳显示比例的效果。
大屏可视化(二):Scale同比缩放视图_第1张图片

你可能感兴趣的:(实战技巧,可视化,大屏可视化,同比缩放视图)