大屏页面.全尺寸自适应.长宽比例不变||动态效果(多次触发)制作全记录

如图，要做到无论页面大小被怎样拖动，里面样式/排版/文字都不乱，比例不变，且随页面等比例放大/缩小

页面代码如下：

 <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="w