如圖，要做到無論頁面大小被怎樣拖動，裏面樣式/排版/文字都不亂，比例不變，且隨頁面等比例放大/縮小
頁面代碼如下：
<div id="warp" class="dengbi-16vs9" style="width: 100%;background-color: #012335;"> <!-- -->
<!-- 整體頁面 開始 -->
<!-- 上部logo 開始 -->
<div style=" width: 100%;height: 11%;padding-top: 0.8%;">
<!-- 裏面的延大logo -->
<div style="width: 24%;height: 86%; margin-left: 2%; background:url(YanAnBigSrceen/延大logo.png) no-repeat; background-size:100% 100%;">
</div>
</div>
<!-- 上部logo 結束 -->
<!-- 主要展示區域 開始 -->
<div style=" width: 100%;height: 89%;padding-top: 1.6%;box-shadow: inset 0 7px 20px -4px #082E43;">
<!-- 左側四個方塊 開始 -->
<div style="width: 72%;height: 97%;float: left;">
<!-- 第一行 開始 -->
<div style="width: 100%;height: 46.4%;padding-left: 1.2% ">
<!-- 第一行左側 -->
<div style="width: 38.3%;height: 100%;float: left;" class="boxShadow-inset"></div>
<!-- 第一行右側 -->
<div style="width: 60.5%;height: 100%;float: right;margin-left:1.2%;" class="boxShadow-inset"></div>
</div>
<!-- 第一行 結束 -->
<!-- 第二行 開始 -->
<div style="width: 100%;height: 51.6%;margin-top: 1.6%;padding-left: 1.2% ">
<!-- 第二行 左側 -->
<div style="width: 38.3%;height: 100%;float: left; " class="boxShadow-inset"></div>
<!-- 第二行 右側 -->
<div style="width: 60.5%;height: 100%;float: right;margin-left:1.2%;" class="boxShadow-inset"></div>
</div>
<!-- 第二行 結束 -->
</div>
<!-- 左側四個方塊 結束 -->
<!-- 右側長條 開始 -->
<div style="width: 27%;height: 97%;float: right;">
<!-- 左側列 開始 -->
<div style="width: 47%;height: 100%;float: left;margin-right: 3%;" class="LongboxShadow-inset"></div>
<!-- 左側列 結束 -->
<!-- 右側列 開始 -->
<div style="width: 47%;height: 100%;float: right;margin-right: 3%;" class="LongboxShadow-inset"></div>
<!-- 右側列 結束 -->
</div>
<!-- 右側長條 結束 -->
</div>
<!-- 主要展示區域 結束 -->
<!-- 整體頁面 結束 -->
</div>
<!-- 額外定義樣式 -->
<style>
/*大部分框的內陰影*/
.boxShadow-inset {
box-shadow: inset -1px 1px 10px 5px #365F7D;
}
.LongboxShadow-inset {
border: 1.5px solid #365F7D;
box-shadow:inset 0 20px 20px -5px #365F7D,inset 0 -30px 15px -14px #365F7D;
}
可見，所有長寬設置都是類似於：width: 100%;height: 51.6%;使用的比例%，至於頁面本身是如何保證比例不變，且隨瀏覽器大小而變化的，原文見這篇，網友真好
-------------------------------------------------------------------------------------------------------------------------------
注意到頁面最左上LOGO的樣式設置：
background:url(YanAnBigSrceen/延大logo.png) no-repeat(爲了不重複); background-size:100% 100%(將圖片拉伸至填滿div,或縮放進div);
------------------------------------------------------------------------------------------------------------------------------------
陰影的使用全部是：
box-shadow：<length><length><length><length>|| <color>
陰影水平偏移值（可取正負值）；陰影垂直偏移值（可取正負值）；陰影邊框；陰影模糊值；陰影顏色
例如：box-shadow: inset -1px 1px 10px 5px #365F7D;
在這裏，除了使用了inset 內陰影外，還可以疊加使用多個陰影：
例：box-shadow:inset 0 20px 20px -5px #365F7D,inset 0 -30px 15px -14px #365F7D;
這是圖片右側窄長的內陰影，上部陰影和下部陰影是分開加上去的，因爲公式可以看到，是不存在一次只設置一側的，所以這裏左右邊部分實際是使用了將邊框設置的過大而避開的（貌似）
------------------------------------------------------------------------------------------------------------------------------------
新增了文字自適應部分，如圖，文字隨頁面變大/縮小
大圖：
小圖（看瀏覽器的書籤欄前後對比應該能看得出來頁面縮小了吧）：
非常的簡單，只要屬性設置爲
font-size:1.3vw;
就可以了，這裏的vw是指： 1% of viewport width（頁面寬度）的意思，隨你想要的填
更加詳細可以看這位熱心網友的博客，感謝他！
------------------------------------------------------------------------------------------------------------------------------------
該佈局的都布好了，因爲頁面有些地方使用的Echarts圖表控件來展示數據，發現一些樣式上和我們想要的功能上的問題，需要調整，如圖：
因爲篇幅太長，我另開了一個改變一些echarts樣式
-------------------------------------------------------------------------------------------------------------------
樣式調整完後本來已經寫好了，但是我們頭想要一個切換文本內容時有動畫效果，用來提醒觀看者內容變了
其實主要使用的是CSS3 的animation（動畫） 屬性：
細節設置有很多，可以私下自己瞭解
eg:
- animation-name 指定要綁定到選擇器的關鍵幀的名稱
- animation-duration 動畫指定需要多少秒或毫秒完成
- animation-timing-function 設置動畫將如何完成一個週期
- animation-delay 設置動畫在啓動前的延遲間隔。
- animation-iteration-count 定義動畫的播放次數。
- animation-direction 指定是否應該輪流反向播放動畫。
- animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
- animation-play-state 指定動畫是否正在運行或已暫停。
- initial 設置屬性爲其默認值。 閱讀關於 initial的介紹。
- inherit 從父元素繼承屬性。 閱讀關於 initinherital的介紹
- .......等等
官方給出的JavaScript 語法:
object.style.animation="mymove 5s infinite"
這裏的：
mymove 對應屬性爲上面的animation-name 指定要綁定到選擇器的關鍵幀的名稱
5s 對應屬性爲上面的animation-duration 動畫指定需要多少秒或毫秒完成
infinite 對應屬性爲上面的animation-iteration-count 定義動畫的播放次數。 infinite指的是‘無限次’ 也可自己設置
實際上使用：
樣式：
/*從下往上樣式*/ /*規定動畫是怎麼樣，也就是動畫的樣式*/
@-webkit-keyframes moveFromBottom {
from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {/*moveFromBottom 動畫名*/
from { transform: translateY(100%); }
}
/*從下往上 選擇器*/ /*規定動畫怎麼播*/
.moveFromBottom {/*動畫名 動畫播放設置； /動畫播放設置有若干項控制項/*/
-webkit-animation: moveFromBottom .6s ease both;
-moz-animation: moveFromBottom .6s ease both;
animation: moveFromBottom .6s ease both;
}
在你需要設置的對象的class裏添加我們定義好的動畫選擇器，但這樣寫的效果，只有在繪製頁面時會出現一次，想要動畫的再/多次觸發，需要另寫方法：
//document.querySelector("#runButton").addEventListener("click", play, false);//監聽了單機事件
//先除去動畫的效果，然後讓文檔重新計算樣式，最後將動畫再次添加到元素上的效果
function play(DivID) {
document.querySelector("#"+DivID).className = "boxShadow-inset";//除去動畫效果。只保留原本的boxShadow-inset
//window.requestAniationFrame(callback)方法告訴瀏覽器你要執行一個動畫，並請求瀏覽器在重新繪繪製頁面之前執行一個函數。
window.requestAnimationFrame(function(time) {//第一個window.requestAniationFrame告訴瀏覽器我要執行一個動畫，請求瀏覽器執行該方法的參數所指定的函數。
window.requestAnimationFrame(function(time) {//告訴瀏覽器我又要執行一個方法，希望瀏覽器在重新繪製頁面之前執行另一個函數
document.querySelector("#"+DivID).className = "boxShadow-inset moveFromBottom";//將動畫效果再次添加到元素上
//然後瀏覽器重新繪製了頁面
});
});
}
更詳細的我找了幾個博客，以供學習：
https://blog.csdn.net/csdn_heshangzhou/article/details/80552461 基本原理
https://blog.csdn.net/milijiangjun/article/details/80436131 實例
https://www.jianshu.com/p/48f3b8344174 動畫的再次觸發與防止多次觸發