如图，要做到无论页面大小被怎样拖动，里面样式/排版/文字都不乱，比例不变，且随页面等比例放大/缩小
页面代码如下：
<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 动画的再次触发与防止多次触发