在做數(shù)據(jù)可視化大屏之前，我們需要考慮到頁面的布局問題以及頁面縮放自適應(yīng)問題，下面分別就這兩個(gè)方面講解。
頁面布局
類似這種頁面區(qū)塊的明顯劃分，常用的布局方式有兩種：
1、flex布局
2、grid布局
grid布局grid布局可以按區(qū)塊來劃分頁面布局，并且可以在劃分布局的基礎(chǔ)上配置區(qū)塊在頁面的占比大小。
關(guān)于grid的官方文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
grid屬性：
| 屬性 | 說明 |
|---|---|
| grid-template-columns | 配置y軸的區(qū)塊數(shù)量和占比 |
| grid-template-rows | 配置x軸的區(qū)塊數(shù)量和占比 |
| grid-area | 來配置區(qū)塊在x、y軸的占比大小。 |
| grid-column-gap | y軸的區(qū)塊間隙 |
| grid-row-gap | x軸的區(qū)塊間隙 |
我們可以使用網(wǎng)格布局實(shí)現(xiàn)如下效果：
代碼如下：
<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;}
}
}
}
這種布局的優(yōu)點(diǎn)是可以根據(jù)頁面的縮放自動(dòng)調(diào)整大小，但需要注意的是，頁面的區(qū)塊內(nèi)的元素不會(huì)自動(dòng)縮放大小。
在使用grid網(wǎng)格布局時(shí)，網(wǎng)格內(nèi)的元素也要使用相對(duì)大小?；蛘?，給網(wǎng)格外面嵌套一層大容器，將網(wǎng)格布局的大小固定住。
flex布局flex布局就是利用flex的比例大小來給頁面進(jìn)行區(qū)塊劃分
flex的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
屬性說明：
| 屬性 | 說明 |
|---|---|
| display:flex | 開啟flex布局 |
| flex:1 | 對(duì)應(yīng)區(qū)塊的占比大小 |
| align-items | 元素在交叉軸的對(duì)齊方式 |
| justify-content | 元素在x軸的排列方式 |
| flex-wrap | 是否允許元素?fù)Q行 |
我們可以使用flex布局實(shí)現(xiàn)如下效果：
代碼如下：
<div class="embody">
<!-- 視圖區(qū)域 -->
<div class="chunk">
<!-- 左側(cè)區(qū)域 -->
<div class="left-chunk">
<div class="left-top"></div>
<div class="left-center"></div>
<div class="left-bottom"></div>
</div>
<!-- 中間區(qū)域 -->
<div class="center-chunk"></div>
<!-- 右側(cè)區(qū)域 -->
<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; /* 去掉內(nèi)邊距和邊框的展位，全都計(jì)算在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;}
}
}
}
在這兩種布局方式上，優(yōu)先選擇flex布局，因?yàn)間rid布局會(huì)隨著頁面的縮放而自動(dòng)更改大小，這種大小的變化只是頁面劃分的區(qū)塊變化，在此基礎(chǔ)之上還要實(shí)際更改區(qū)塊內(nèi)容的大小縮放問題
頁面自適應(yīng)
由于頁面的窗口大小是不確定的，所以我們要使用相對(duì)單位來設(shè)置大小，css中有一個(gè)rem的概念，rem也就是根據(jù)根節(jié)點(diǎn)字體大小單位而來的相對(duì)單位，例如：根節(jié)點(diǎn)的字體大小為20px，那么1rem = 20px，基于rem，我們要根據(jù)窗口的大小來計(jì)算根節(jié)點(diǎn)的字體大小，具體的實(shí)現(xiàn)方式如下：
// 自調(diào)用
(function(){
/* 頁面加載獲取頁面寬度 */
let setFont = function () {
// 因?yàn)橐x變量可能和別的變量沖突，造成污染，所以用自調(diào)用函數(shù)
let html = document.documentElement; // 獲取html
// 獲取html寬度
let width = html.clientWidth;
// 判斷，限制最小和最大寬度（這一步可省略）
if(width < 1024) width = 1024
if(width > 1920) width = 1920
// 設(shè)置html的基準(zhǔn)值, 1920 / 80 = 24px也就是1rem=24px
let fontSize = width / 153 + 'px' // 那么這里屏幕大小1530px,1rem=10px
// 設(shè)置給html
html.style.fontSize = fontSize;
}
setFont(); // 調(diào)用
/* 頁面改變的時(shí)候需要重新設(shè)置 */
// 尺寸改變事件,window.onresize為當(dāng)瀏覽器重置大小的時(shí)候執(zhí)行的函數(shù)
window.onresize = function () {
setFont();
}
})()
將該文件引入main文件即可。文章來源：http://www.zghlxwxcb.cn/news/detail-448512.html
如果覺得這篇文章對(duì)你有幫助，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)哦~文章來源地址http://www.zghlxwxcb.cn/news/detail-448512.html
到了這里，關(guān)于數(shù)據(jù)可視化大屏的頁面布局以及自適應(yīng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
