在做数据可视化大屏之前，咱们须要思考到页面的布局问题以及页面缩放自适应问题，上面别离就这两个方面解说。
页面布局
相似这种页面区块的显著划分，罕用的布局形式有两种：
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文件即可。
如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~