瀏覽器自適應問題

瀏覽器自適應問題

本章節主要講解了瀏覽器應該如何自適應1366和1980兩種屏幕，其中包括echart.js和svg如何在頁面中使用的基本情況介紹

一、準備工作：
1）首先需要編寫出一套通用的html結構代碼
2）其次需要分別寫出1920*1080和1366*768屏幕對應的css
3）最後頁面使用百分比佈局+rem佈局來佈置頁面
4）在js中需要獲取縮放後屏幕的尺寸大小
5）使用媒體查詢@media實現1920和1366的自適應
6）echart.js的使用
7）svg的使用

二、1920屏幕
1）需要在body或最外層div上設置min-width：1980px;目的是爲了讓1366至1980之間的樣式能隨着屏幕的縮小而不改變其中的基本樣式
2）獲取盒子中的每一個元素的高，讓其自動填充盒子的高度
3）在js中獲取每一個盒子的類名和id值

對應的html代碼:
<div class="main">
    <div class="left">
        <div class="top_box1">
            <div class="m1" id="n1"></div>
            <div class="m2" id="n2"></div>
        </div>
        <div class="bottom_box2"></div>
    </div>
    <div class="center"></div>
    <div class="right"></div>
</div>
對應的css代碼:
@media screen and (min-width:1367px) {
    .main {
        min-width: 1920px;
        width:100%;
        background-color: #014982;
    }
    .main .left {
        width: 33%;
        border: 1px solid red;
    }
    .main .center{
        width: 33%;
        border: 1px solid skyblue;
    }
    .main .right{
        width: 34%;
        border: 1px solid yellow;
    }
}
對應的js代碼:
var H = document.documentElement.clientHeight;//獲取瀏覽器的高度
console.log(H);//打印並檢測高度
var topData = document.getElementsByClassName('top_box1')[0];
topData.style.height = H*0.500+'px';//此爲left中的top盒子的高度，0.500表示上部分盒子的高度所佔有的百分小數
var bottomData = document.getElementsByClassName('top_box2')[0];
bottomData .style.height = H*0.460+'px';//此爲left中的top盒子的高度，0.460表示下部分盒子的高度所佔有的百分小數
var n1 = document.getElementById('n1');//獲取內層盒子的id：n1
n1.style.height = H*0.068+'px';
var n2 = document.getElementById('n2');//獲取內層盒子的id：n2
n2.style.height = H*0.068+'px';

三、1366屏幕
其步驟和1920的類似，代碼如下：

對應的html代碼:
<div class="main">
    <div class="left">
        <div class="top_box1">
            <div class="m1" id="n1"></div>
            <div class="m2" id="n2"></div>
        </div>
        <div class="bottom_box2"></div>
    </div>
    <div class="center"></div>
    <div class="right"></div>
</div>
對應的css代碼:
@media screen and (min-width:1366px) {
    .main {
        min-width: 1920px;
        width:100%;
        background-color: #014982;
    }
    .main .left {
        width: 33%;
        border: 1px solid red;
    }
    .main .center{
        width: 33%;
        border: 1px solid skyblue;
    }
    .main .right{
        width: 34%;
        border: 1px solid yellow;
    }
}
對應的js代碼:
var H = document.documentElement.clientHeight;//獲取瀏覽器的高度
console.log(H);//打印並檢測高度
var topData = document.getElementsByClassName('top_box1')[0];
topData.style.height = H*0.500+'px';//此爲left中的top盒子的高度，0.500表示上部分盒子的高度所佔有的百分小數
var bottomData = document.getElementsByClassName('top_box2')[0];
bottomData .style.height = H*0.460+'px';//此爲left中的top盒子的高度，0.460表示下部分盒子的高度所佔有的百分小數
var n1 = document.getElementById('n1');//獲取內層盒子的id：n1
n1.style.height = H*0.068+'px';
var n2 = document.getElementById('n2');//獲取內層盒子的id：n2
n2.style.height = H*0.068+'px';

四、echart.js在頁面中的運用
需求：需要在頁面中動態的獲取圖形的數據，使用echart.js是爲了可視化數據，讓用戶更加清晰簡單的看到

執行步驟：
1）需要將引入的echarts庫引入至項目中，在此文件中爲js外部引入，根據項目需求修改js中的參數，可參考echarts官網來學習

<script src="./echarts.min.js"></script>//引入echarts庫
<script src="./main.js"></script>//引入圖表所在的js文件

2）由於echarts是外部引入的圖表，所以需要一個盒子單獨包裹，該盒子擁有寬高，這裏的寬高依舊採用百分比的模式
3）在做echarts自適應的時候，其規則和普通的獲取頁面的元素類似

對應的html代碼：
<div class="box">
    <div class="b1">
        <div class="picture" id="picture1"></div>
    </div>
    <div class="b2"></div>
</div>
對應的css代碼：
.picture {
    width: 100%;
    height: 100%;
}
#picture {
    //對圖標的樣式做操作，根據項目需求而定
}
對應的js代碼：
var H = document.documentElement.clientHeight;//獲取瀏覽器的高度
console.log(H);//打印並檢測高度
var picture1= document.getElementById('picture1');
picture1.style.height = H*0.434+'px';

五、svg在頁面中的運用
頁面中一些簡單的圖片均可以用svg來製作

<div class="photo">
    <svg width='154px' height='22' xmlns="http://www.w3.org/2000/svg " version="1.1">//圖片的總體寬度154px，高度22px
        <polygon points="0,0 154,0 142,22 12,22" style="fill:#22344E" />
        <text x='55' dy='15' style='fill: #ffffff;'>人員分析</text>
    </svg>
    <div class="person1"  id="analysis"></div>
</div>