乐趣区

关于前端:数据可视化大屏的页面布局以及自适应

jiezi

在做数据可视化大屏之前，咱们须要思考到页面的布局问题以及页面缩放自适应问题，上面别离就这两个方面解说。

页面布局

相似这种页面区块的显著划分，罕用的布局形式有两种：
1、flex布局
2、grid 布局

grid 布局
grid 布局能够按区块来划分页面布局，并且能够在划分布局的根底上配置区块在页面的占比大小。

对于 grid 的官网文档阐明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

grid属性：

属性 阐明
grid-template-columns 配置 y 轴的区块数量和占比
grid-template-rows 配置 x 轴的区块数量和占比
grid-area 来配置区块在 x、y 轴的占比大小。
grid-column-gap y 轴的区块间隙
grid-row-gap x 轴的区块间隙

咱们能够应用网格布局实现如下成果：

代码如下：

<div class="container">
         <div class="embody">
               <div class="head-title"></div>
               <div class="chunk">
                  <div class="left-chunk">
                     <div class="left-top"></div>
                     <div class="left-center"></div>
                     <div class="left-bottom"></div>
                  </div>
                  <div class="center-chunk">
                    <div class="center-main"></div>
                    <div class="center-bottom"></div>
                  </div>
                  <div class="right-chunk">
                    <div class="right-top"></div>
                    <div class="right-center-top"></div>
                    <div class="right-center-bottom">
                        <div class="right-center-bottom-inner-left"></div>
                        <div class="right-center-bottom-inner-right"></div>
                    </div>
                    <div class="right-bottom"></div>
                  </div>
               </div>
         </div>
    </div>
.container{
    width: 100%;
    height: 100vh;
    background: #101129;
}

.embody{
    width: 100%;
    height: 100%;
    border: 1px solid red;
    .head-title{
        width: 100%;
        height: 80px;
        border: 1px solid cyan;
        background: url('../../assets/logo.png') no-repeat center / 100%;
    }
    .chunk{
        width: 100%;
        height: calc(100% - 80px);
        border: 1px solid gold;
        display: grid;
        grid: repeat(5,1fr) / repeat(7,1fr);  /* x / y */
        grid-column-gap : 10px;
        grid-row-gap : 0px;

        .left-chunk {grid-area :  1 / 1 / 6 / 3; border: 1px solid cyan;}
        .center-chunk {grid-area : 1 / 3 / 6 / 6; border: 1px solid red;}
        .right-chunk {grid-area : 1 / 6 / 6 / 8; border: 1px solid violet;}
    }

    .left-chunk{
        display: grid;
        grid: 1fr 4fr 3fr / repeat(1,1fr);
        grid-column-gap:0px;
        grid-row-gap:10px;
        .left-top{border: 1px solid red;}
        .left-center{border: 1px solid red;}
        .left-bottom{border: 1px solid red;}

    }
    .center-chunk{
        display: grid;
        grid: 5fr 3fr / 1fr;
        grid-column-gap : 0px;
        grid-row-gap : 10px;
        .center-main{border: 1px solid red;}
        .center-bottom{border: 1px solid red;}
    }
    .right-chunk{
       display: grid;
       grid: 1 repeat(3,2fr) / 1fr;
       grid-column-gap:0px;
       grid-row-gap:10px;
       >div{border: 1px solid red;}

       .right-center-bottom{
        display: grid;
        grid: 1fr / repeat(2,1fr);
        grid-column-gap : 10px;
        grid-row-gap : 0px;
        >div{border:1px solid red;}
       }

    }
}

这种布局的长处是能够依据页面的缩放主动调整大小，但须要留神的是，页面的区块内的元素不会主动缩放大小。
在应用 grid 网格布局时，网格内的元素也要应用绝对大小。或者，给网格里面嵌套一层大容器，将网格布局的大小固定住。

flex 布局
flex 布局就是利用 flex 的比例大小来给页面进行区块划分

flex 的文档阐明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

属性阐明：
| 属性 | 阐明 |
| — | — |
| display:flex | 开启 flex 布局 |
| flex:1 | 对应区块的占比大小 |
|align-items | 元素在穿插轴的对齐形式 |
|justify-content| 元素在 x 轴的排列形式 |
|flex-wrap| 是否容许元素换行 |

咱们能够应用 flex 布局实现如下成果：

代码如下：

<div class="embody">
     <!-- 视图区域 -->
     <div class="chunk">
          <!-- 左侧区域 -->
          <div class="left-chunk">
              <div class="left-top"></div>
              <div class="left-center"></div>
              <div class="left-bottom"></div>
          </div>
          <!-- 两头区域 -->
          <div class="center-chunk"></div>
          <!-- 右侧区域 -->
          <div class="right-chunk"></div>
     </div>
</div>
.embody{
    min-width: 1024px;
    max-width: 1920px;
    min-height: 780px;
    height: 100%;
    border: 1px solid red;
    padding: 0px 1rem 0px 1rem;
    flex-wrap: wrap-reverse;
    .chunk{width: calc(100% - 2rem);
        border: 1px solid gold;
        margin-top: -1.5rem;
        display: flex;
        margin: 0 auto;
        .left-chunk{flex: 3;}
        .center-chunk{flex: 4;}
        .right-chunk{flex: 3;}
    }

    .left-chunk{
        .left-top{ 
            height: 10rem;
            box-sizing:border-box;  
            border: 1px solid red
        }
        .left-center{
            box-sizing: border-box;  /* 去掉内边距和边框的展位，全都计算在 width 中 */
            width: 100%;
            height: 40rem;
            margin-top: 1rem;
            border: 1px solid red;
        }
        .left-bottom{
            height: 20rem;
            margin-top: 1rem;
            border: 1px solid red;
        }

    }
    .center-chunk{
        border: 1px solid red;
        .center-main{border: 1px solid red;}
        .center-bottom{border: 1px solid red;}
    }
    .right-chunk{
       display: grid;
       grid: 1 repeat(3,2fr) / 1fr;
       grid-column-gap:0px;
       grid-row-gap:10px;
       border: 1px solid red;
       >div{border: 1px solid red;}

       .right-center-bottom{
        display: grid;
        grid: 1fr / repeat(2,1fr);
        grid-column-gap : 10px;
        grid-row-gap : 0px;
        >div{border:1px solid red;}
       }
    }
}

在这两种布局形式上，优先选择 flex 布局，因为 grid 布局会随着页面的缩放而主动更改大小，这种大小的变动只是页面划分的区块变动，在此基础之上还要理论更改区块内容的大小缩放问题

页面自适应

因为页面的窗口大小是不确定的，所以咱们要应用绝对单位来设置大小，css中有一个 rem 的概念，rem也就是依据根节点字体大小单位而来的绝对单位，例如：根节点的字体大小为20px，那么1rem = 20px，基于rem，咱们要依据窗口的大小来计算根节点的字体大小，具体的实现形式如下：

// 自调用
(function(){
    /* 页面加载获取页面宽度 */
    let setFont = function () {
        // 因为要定义变量可能和别的变量抵触，造成净化，所以用自调用函数
        let html = document.documentElement; // 获取 html
        // 获取 html 宽度
        let width = html.clientWidth;

        // 判断，限度最小和最大宽度（这一步可省略）if(width < 1024) width = 1024
        if(width > 1920) width = 1920

        // 设置 html 的基准值, 1920 / 80 = 24px 也就是 1rem=24px
        let fontSize = width / 153 + 'px'  // 那么这里屏幕大小 1530px,1rem=10px
        
        // 设置给 html
        html.style.fontSize = fontSize;
    }
    setFont(); // 调用

    /* 页面扭转的时候须要从新设置 */
    // 尺寸扭转事件,window.onresize 为当浏览器重置大小的时候执行的函数
    window.onresize = function () {setFont();
    }
})()

将该文件引入 main 文件即可。

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~

退出移动版