From dfebda1bb52b4517d3cdbd4e17aef56f5f0231d8 Mon Sep 17 00:00:00 2001
From: unknown <1162963624@qq.com>
Date: Tue, 1 Dec 2020 10:02:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/index.css | 272 +++++++++++++++++++++----------------------
 public/css/room.css  |  21 ++--
 public/zhibo.html    | 124 ++++++++++++++------
 3 files changed, 235 insertions(+), 182 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 616d855..4d93271 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -45,16 +45,16 @@ div{
     align-items: center;
 }
 #login-card{
-    width: 450px;
-    height: 500px;
+    width: 450rem;
+    height: 500rem;
     display: flex;
     /* justify-content: center; */
     align-items: center;
     background-color: white;
 }
 .login-card{
-    width: 360px;
-    height: 450px;
+    width: 360rem;
+    height: 450rem;
     background-color: white;
     margin: 0 auto;
     display: flex;
@@ -62,8 +62,8 @@ div{
     align-items: center;
 }
 .popover{
-    min-width: 300px;
-    max-width: 1000px;
+    min-width: 300rem;
+    max-width: 1000rem;
     border: 0;
     white-space: nowrap;
     /* overflow: hidden; */
@@ -74,7 +74,7 @@ div{
 }
 .popover-body>div{
     width: 100%;
-    height: 35px;
+    height: 35rem;
     justify-content: center;
     cursor: default;
 }
@@ -94,29 +94,29 @@ div{
 .device-testing-btn{
     color: #515151;
     cursor: pointer;
-    margin-top: -14px;
+    margin-top: -14rem;
     opacity: 0.8;
 }
 .device-connect-list{
-    width: 310px;
-    height: 70px;
+    width: 310rem;
+    height: 70rem;
     position: absolute;
-    bottom: 50px;
+    bottom: 50rem;
     background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 5rem;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
     justify-content: space-around;
-    padding: 0 10px;
+    padding: 0 10rem;
 }
 .device-connect-list::before{
     content: '';
     width: 0;
     height: 0;
-    border: 8px transparent solid; 
+    border: 8rem transparent solid; 
     border-top-color: rgba(0, 0, 0, 0.2);
     opacity: 0.6;
     position: absolute;
-    bottom: -16px;
+    bottom: -16rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -124,29 +124,29 @@ div{
     content: '';
     width: 0;
     height: 0;
-    border: 7px transparent solid; 
+    border: 7rem transparent solid; 
     border-top-color: #fff;
     position: absolute;
-    bottom: -14px;
+    bottom: -14rem;
     left: 50%;
     transform: translateX(-50%);
 }
 .connect{
-    width: 28px;
-    height: 64px;
-    font-size: 28px;
+    width: 28rem;
+    height: 64rem;
+    font-size: 28rem;
     text-align: center;
     position: relative;
     opacity: 0.8;
 }
 .device-icon{
-    width: 20px;
-    height: 20px;
-    margin-right: 3px;
+    width: 20rem;
+    height: 20rem;
+    margin-right: 3rem;
     display: block;
     text-align: center;
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 20rem;
+    line-height: 20rem;
 }
 #device-testing-root {
     width: 100%;
@@ -160,10 +160,10 @@ div{
     background: rgba(0, 0, 0, 0.1);
 }
 .device-testing-card{
-    width: 640px;
-    height: 480px;
+    width: 640rem;
+    height: 480rem;
     background: #F7F7F7;
-    border-radius: 10px;
+    border-radius: 10rem;
     position: relative;
     display: block;
     z-index: 999;
@@ -172,49 +172,49 @@ div{
     display: block;
 }
 .testing-title{
-    font-size: 34px;
+    font-size: 34rem;
     justify-content: center;
-    margin-top: 55px;
+    margin-top: 55rem;
     color: #201e1ee5;
 }
 .testing-prepare-info{
-    font-size: 16px;
+    font-size: 16rem;
     justify-content: center;
-    margin-top: 25px;
+    margin-top: 25rem;
     color: #585656e5;
 }
 .device-testing-close-btn{
-    width: 25px;
-    height: 25px;
+    width: 25rem;
+    height: 25rem;
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 8rem;
+    right: 8rem;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 20rem;
 }
 .device-display{
-    margin-top: 40px;
+    margin-top: 40rem;
     justify-content: center;
 }
 .device{
-    width: 46px;
-    height: 46px;
+    width: 46rem;
+    height: 46rem;
     position: relative;
     justify-content: center;
-    font-size: 38px;
+    font-size: 38rem;
 }
 .device:not(:first-child){
-    margin-left: 60px;
+    margin-left: 60rem;
 }
 .device:not(:first-child).safari{
-    margin-left: 100px;
+    margin-left: 100rem;
 }
 .device::before{
     content: '';
-    width: 28px;
-    height: 28px;
+    width: 28rem;
+    height: 28rem;
     position: absolute;
-    bottom: -34px;
+    bottom: -34rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -229,82 +229,82 @@ div{
 @keyframes device-loading {
     0%{
         width: 0%;
-        border-radius: 6px 0 0 6px;
+        border-radius: 6rem 0 0 6rem;
     }
     50%{
         width: 50%;
-        border-radius: 6px 0 0 6px;
+        border-radius: 6rem 0 0 6rem;
     }
     100%{
         width: 100%;
-        border-radius: 6px;
+        border-radius: 6rem;
     }
 }
 .loading-background{
-    width: 350px;
-    height: 3px;
-    border-radius: 6px;
-    margin: 20px auto 0;
+    width: 350rem;
+    height: 3rem;
+    border-radius: 6rem;
+    margin: 20rem auto 0;
     background: #bfbfbf;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }
 .device-loading{
-    height: 3px;
+    height: 3rem;
     background-color: #808080;
     animation: device-loading 2s;
     animation-fill-mode: both;
 }
 .connect-info{
-    margin-top: 60px;
+    margin-top: 60rem;
     display: flex;
-    height: 48px;
+    height: 48rem;
     justify-content: center;
 }
 .connect-attention-container{
     position: relative;
-    margin-left: 3px;
+    margin-left: 3rem;
 }
 .connect-attention-icon{
-    font-size: 20px;
+    font-size: 20rem;
     color: red;
 }
 .connect-attention-info{
-    padding: 8px 12px;
-    min-width: 120px;
-    min-height: 50px;
+    padding: 8rem 12rem;
+    min-width: 120rem;
+    min-height: 50rem;
     background: rgba(0, 0, 0, 0.6);
-    border-radius: 10px;
+    border-radius: 10rem;
     color: #fff;
     position: absolute;
     right: 0;
     bottom: 100%;
-    transform: translate(20px, -10px);
+    transform: translate(20rem, -10rem);
     display: block;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: 12rem;
 }
 .connect-attention-info::after{
     content: '';
     width: 0;
     height: 0;
-    border: 10px transparent solid;
+    border: 10rem transparent solid;
     border-top-color: rgba(0, 0, 0, 0.6);
     position: absolute;
     left: 100%;
     top: 100%;
-    transform: translateX(-40px);
+    transform: translateX(-40rem);
 }
 .testing-btn-display{
     justify-content: center;
-    margin-top: 30px;
+    margin-top: 30rem;
 }
 .test-btn{
-    width: 200px;
-    height: 44px;
+    width: 200rem;
+    height: 44rem;
     background: #006EFF;
-    border-radius: 5px;
+    border-radius: 5rem;
     text-align: center;
     color: #fff;
     justify-content: center;
@@ -318,35 +318,35 @@ div{
 .device-testing-title{
     justify-content: center;
     width: 100%;
-    margin-top: 40px;
+    margin-top: 40rem;
 }
 .testing{
-    width: 26px;
-    height: 26px;
+    width: 26rem;
+    height: 26rem;
     position: relative;
     justify-content: center;
     text-align: center;
-    font-size: 24px;
-    line-height: 24px;
+    font-size: 24rem;
+    line-height: 24rem;
 }
 .testing:not(:first-child){
-    margin-left: 90px;
+    margin-left: 90rem;
 }
 .testing:not(:first-child)::before {
     content: '';
-    width: 70px;
-    height: 2px;
+    width: 70rem;
+    height: 2rem;
     position: absolute;
     top: 50%;
-    left: -80px;
+    left: -80rem;
     background: #bfbfbf;
 }
 .testing:not(:first-child).safari{
-    margin-left: 150px;
+    margin-left: 150rem;
 }
 .testing:not(:first-child).safari::before{
-    width: 130px;
-    left: -140px;
+    width: 130rem;
+    left: -140rem;
 }
 .testing.complete {
     cursor: pointer;
@@ -359,27 +359,27 @@ div{
     display: block;
 }
 .device-list{
-    margin-left: 140px;
-    margin-top: 30px;
+    margin-left: 140rem;
+    margin-top: 30rem;
 }
 .device-select{
-    width: 260px;
-    height: 30px;
-    margin-left: 20px;
-    padding: 0 10px;
-    border-radius: 4px;
+    width: 260rem;
+    height: 30rem;
+    margin-left: 20rem;
+    padding: 0 10rem;
+    border-radius: 4rem;
 }
 .camera-video{
-    width: 300px;
-    height: 180px;
+    width: 300rem;
+    height: 180rem;
     display: block;
-    margin: 30px auto 0;
+    margin: 30rem auto 0;
 }
 .testing-info-container{
     display: block;
     position: absolute;
-    bottom: 50px;
-    margin-top: 24px;
+    bottom: 50rem;
+    margin-top: 24rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -389,69 +389,69 @@ div{
     display: block;
 }
 .button-list{
-    margin-top: 20px;
-    width: 300px;
+    margin-top: 20rem;
+    width: 300rem;
     justify-content: space-around;
 }
 .fail-button{
-    border: 1px solid #006EFF;
-    border-radius: 8px;
+    border: 1rem solid #006EFF;
+    border-radius: 8rem;
     color: #006EFF;
-    padding: 6px 14px;
+    padding: 6rem 14rem;
     cursor: pointer;
 }
 .success-button{
-    border: 1px solid #006EFF;
-    border-radius: 8px;
+    border: 1rem solid #006EFF;
+    border-radius: 8rem;
     background: #006EFF;
     color: #fff;
-    padding: 6px 14px;
+    padding: 6rem 14rem;
     cursor: pointer;
 }
 .audio-control{
-    width: 320px;
+    width: 320rem;
     display: block;
-    margin: 40px auto 0;
+    margin: 40rem auto 0;
 }
 .audio-control-info{
-    margin: 0px auto 20px 6px;
+    margin: 0rem auto 20rem 6rem;
     color: #5f5f5f;
 }
 .mic-testing-container{
     display: block;
-    margin-top: 30px;
+    margin-top: 30rem;
 }
 .mic-testing-info{
-    margin-left: 140px;
+    margin-left: 140rem;
     color: #bbbbbb;
-    font-size: 14px;
+    font-size: 14rem;
 }
 .mic-bar-container{
     justify-content: center;
-    margin-top: 10px;
+    margin-top: 10rem;
 }
 .mic-bar{
-    width: 10px;
-    height: 30px;
-    border: 1px solid #cccccc;
-    border-radius: 1px;
+    width: 10rem;
+    height: 30rem;
+    border: 1rem solid #cccccc;
+    border-radius: 1rem;
 }
 .mic-bar:not(:first-child){
-    margin-left: 3px;
+    margin-left: 3rem;
 }
 .mic-bar.active{
     background: #006EFF;
 }
 .testing-index-list{
-    margin-top: 40px;
+    margin-top: 40rem;
     display: block;
 }
 .testing-index-group{
     width: 55%;
     display: flex;
     justify-content: space-between;
-    margin-top: 14px;
-    margin: 10px auto 0;
+    margin-top: 14rem;
+    margin: 10rem auto 0;
 }
 @keyframes loading-circle{
     0% {
@@ -472,51 +472,51 @@ div{
 }
 .network-loading::before{
     content: '';
-    width: 16px;
-    height: 16px;
+    width: 16rem;
+    height: 16rem;
     background: url('../img/loading.png');
     background-size: 100% 100%;
     animation: loading-circle 2s linear infinite;
 }
 .testing-footer{
-    margin-top: 70px;
+    margin-top: 70rem;
     justify-content: center;
 }
 .device-report-list{
     display: block;
-    margin-top: 40px;
+    margin-top: 40rem;
 }
 .device-report{
     width: 60%;
-    margin: 20px auto 0;
+    margin: 20rem auto 0;
     justify-content: space-between;
 }
 .report-icon{
-    width: 24px;
-    height: 24px;
-    margin-right: 20px;
+    width: 24rem;
+    height: 24rem;
+    margin-right: 20rem;
     justify-content: center;
-    font-size: 22px;
-    line-height: 22px;
+    font-size: 22rem;
+    line-height: 22rem;
     color: #515151;
 }
 .device-name{
-    width: 280px;
-    height: 24px;
+    width: 280rem;
+    height: 24rem;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .device-report-footer{
-    margin-top: 50px;
+    margin-top: 50rem;
     justify-content: center;
 }
 .device-report-btn{
-    width: 160px;
-    height: 40px;
-    border: 1px solid;
-    border-radius: 6px;
+    width: 160rem;
+    height: 40rem;
+    border: 1rem solid;
+    border-radius: 6rem;
     justify-content: center;
     cursor: pointer;
 }
@@ -527,5 +527,5 @@ div{
 .testing-finish{
     background: #006EFF;
     color: #fff;
-    margin-left: 60px;
+    margin-left: 60rem;
 }
\ No newline at end of file
diff --git a/public/css/room.css b/public/css/room.css
index c3d6992..7d617ab 100644
--- a/public/css/room.css
+++ b/public/css/room.css
@@ -15,7 +15,7 @@ body{
 video{
     background-color: #d8d8d8;
 }
-/* @media screen and (min-width:960px) {
+/* @media screen and (min-width:960rem) {
     video{
         width: auto !important;
         height: 100% !important;
@@ -28,7 +28,7 @@ video{
         align-items: center;
     }
 }
-@media screen and (max-width:960px) {
+@media screen and (max-width:960rem) {
     video{
         width: 100% !important;
         height: auto !important;
@@ -43,12 +43,13 @@ video{
 } */
 #room-root{
     width: 100%;
-    height: 100%;
-    min-width: 1500px;
-    min-height: 700px;
+    height: 750rem;
+    /* min-width: 1500rem; */
+    /* min-height: 700rem; */
     display: none;
     align-items: flex-start;
-    padding: 16px;
+    padding: 16rem;
+    background-color: #F5F5F5;
 }
 .member{
     cursor: default;
@@ -66,14 +67,14 @@ video{
 }
 #video-grid>div{
     position: relative;
-    padding: 10px;
+    padding: 10rem;
 }
 #main-video{
     width: 100%;
     height: 100%;
-    padding: 10px;
+    padding: 10rem;
     grid-area: 1/1/3/4;
-    border-radius: 17px;
+    border-radius: 17rem;
 }
 .video-box{
     width: 100%;
@@ -83,7 +84,7 @@ video{
     width: 100%;
     height: 100%;
     position: absolute;
-    font-size: 14px; 
+    font-size: 14rem; 
     color: #888888; 
     z-index: 9; 
     justify-content: center
diff --git a/public/zhibo.html b/public/zhibo.html
index 53cec84..698d50b 100644
--- a/public/zhibo.html
+++ b/public/zhibo.html
@@ -8,20 +8,71 @@
     <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
     <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./css/room.css">
+    <script>
+        (function (designWidth, maxWidth) {
+            var doc = document,
+                win = window,
+                docEl = doc.documentElement,
+                remStyle = document.createElement("style"),
+                tid;
+
+            function refreshRem() {
+
+                var width = docEl.getBoundingClientRect().width;
+                // maxWidth = maxWidth || 540; //不需要判断最大宽度
+                // width > maxWidth && (width = maxWidth);
+                var rem = width * 100 / designWidth;
+                console.log(rem)
+
+                remStyle.innerHTML = 'html{font-size:' + rem / 100 + 'px;}';
+            }
+
+            if (docEl.firstElementChild) {
+                docEl.firstElementChild.appendChild(remStyle);
+            } else {
+                var wrap = doc.createElement("div");
+                wrap.appendChild(remStyle);
+                doc.write(wrap.innerHTML);
+                wrap = null;
+            }
+            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+            refreshRem();
+
+            win.addEventListener("resize", function () {
+                clearTimeout(tid); //防止执行两次
+                tid = setTimeout(refreshRem, 300);
+            }, false);
+
+            win.addEventListener("pageshow", function (e) {
+                if (e.persisted) { // 浏览器后退的时候重新计算
+                    clearTimeout(tid);
+                    tid = setTimeout(refreshRem, 300);
+                }
+            }, false);
+
+            if (doc.readyState === "complete") {
+                doc.body.style.fontSize = "16px";
+            } else {
+                doc.addEventListener("DOMContentLoaded", function (e) {
+                    doc.body.style.fontSize = "16px";
+                }, false);
+            }
+        })(1366, 1024);
+    </script>
     <style>
         #member-list > div{
-            padding: 32px;
-            border-bottom: 1px solid #EEEEEE;
+            padding: 13rem;
+            border-bottom: 1rem solid #EEEEEE;
         }
         .liaotian{
             grid-area: 3/1/4/4;
-            margin-top: 28px;
+            margin-top: 28rem;
             height: 90%;
-            margin-left: 10px;
+            margin-left: 10rem;
             width: 98%;
             background-color: #fff;
-            border-radius: 17px;
-            padding: 24px 28px 14px 28px !important;
+            border-radius: 17rem;
+            padding: 24rem 28rem 14rem 28rem !important;
             display: flex;
             flex-direction: column;
         }
@@ -35,42 +86,43 @@
         }
         .wenzi > div{
             width: 100%;
-            font-size: 11px;
+            font-size: 11rem;
         }
         .wenzi > div >p:first-child {
-            margin-right: 33px;
+            margin-right: 33rem;
         }
         .wenzi > div >p span{
             color: #08AE98;
         }
         .fasongkuang{
             width: 100%;
-            height: 47px;
+            height: 29rem;
             display: flex;
             align-items: flex-end;
             justify-content: space-between;
             flex-shrink: 0;
-            border-top: 1px solid #DCDFE0;
+            border-top: 1rem solid #DCDFE0;
         }
         .fasongkuang input{
-            font-size: 11px;
+            font-size: 11rem;
             color: #333;
-            width: 600px;
+            width: 430rem;
             border: none;
             
         }
         .fasonganniu{
             display: flex;
-            font-size: 11px;
+            font-size: 11rem;
             color: #08AE98;
             align-items: center;
         }
         .fasonganniu img{
-            width: 15px;
-            height: 12px;
+            width: 15rem;
+            height: 12rem;
+            margin-left: 7rem;
         }
         .fasongkuang input::placeholder{
-            font-size: 11px;
+            font-size: 11rem;
         }
         .fasongkuang input:focus{ border: none; background: #fff; outline: none;}
     </style>
@@ -315,37 +367,37 @@
         <!-- 聊天室页面 -->
         <div id="room-root" class="col-div">
             <!-- header -->
-            <div class="row-div card" style="width: 100%; height: 65px; justify-content: space-between;border-radius: 17px;">
+            <div class="row-div card" style="width: 100%; height: 65rem; justify-content: space-between;border-radius: 17rem;">
                 <!-- 腾讯云logo -->
-                <div class="row-div" style="height: 100%; width: 230px; justify-content: center">
+                <div class="row-div" style="height: 100%; width: 230rem; justify-content: center">
                     
-                    <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">直播页面</div>
+                    <div style="width: 86rem; height: 23rem; font-size: 18rem; color: #333333">直播页面</div>
                 </div>
                 <!-- 分享屏幕 退出 按钮 -->
-                <div class="row-div" style="height: 100%; width: auto;margin-right: 28px;">
-                    <img id="screen-btn" style="width: 45px; height: 45px" src="./img/screen-off.png" alt="">
-                    <div style="width: 20px"></div>
-                    <img id="logout-btn" style="width: 45px; height: 45px" src="./img/logout.png" alt="">
+                <div class="row-div" style="height: 100%; width: auto;margin-right: 28rem;">
+                    <img id="screen-btn" style="width: 45rem; height: 45rem" src="./img/screen-off.png" alt="">
+                    <div style="width: 20rem"></div>
+                    <img id="logout-btn" style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
                 </div>
                 
                 
             </div>
             <!-- content -->
-            <div class="row-div" style="height: 100%; width: 100%; padding: 10px">
-                <div class="col-div" style="width: 340px; height: 100%; padding: 10px">
-                    <div class="col-div card" style="width: 100%; height: 100%; padding: 23px;border-radius: 17px;">
+            <div class="row-div" style="height: 100%; width: 100%; padding: 10rem">
+                <div class="col-div" style="width: 340rem; height: 100%; padding: 10rem">
+                    <div class="col-div card" style="width: 100%; height: 100%; padding: 23rem;border-radius: 17rem;font-size: 14rem;">
                         <!-- 成员列表 -->
-                        <div style="width: 100%;padding-bottom: 11px;border-bottom: 1px solid #EEEEEE;">上课人员</div>
+                        <div style="width: 100%;padding-bottom: 11rem;border-bottom: 1rem solid #EEEEEE;">上课人员</div>
                         <div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
                             <!-- member -->
-                            <div id="member-me" style="width: 100%; padding-left: 20px;">
+                            <div id="member-me" style="width: 100%; padding-left: 20rem;">
                                 <div class="row-div member"
-                                    style="width: 100%; height: 50px; justify-content: space-between">
+                                    style="width: 100%; height: 50rem; justify-content: space-between">
                                     <div class="member-id">(我)</div>
-                                    <div class="row-div" style="width:100px; height: 27px; justify-content: center">
+                                    <div class="row-div" style="width:100rem; height: 20rem; justify-content: center">
                                         <img id="video-btn" class="member-video-btn" style="height: 100%" src="./img/camera-on.png"
                                             alt="">
-                                        <div style="width: 18px"></div>
+                                        <div style="width: 18rem"></div>
                                         <img id="mic-btn" class="member-audio-btn" style="height: 100%" src="./img/mic-on.png"
                                             alt="">
                                     </div>
@@ -361,17 +413,17 @@
                     <div id="main-video" class="video-box col-div" style="justify-content: flex-end">
                         <!-- 主视频控制按钮 -->
                         <!-- <div id="main-video-btns" class="row-div"
-                            style="width: 156px; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
-                            <img id="video-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
+                            style="width: 156rem; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
+                            <img id="video-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
                                 src="./img/big-camera-on.png" alt="" title="关闭摄像头">
-                            <img id="mic-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
+                            <img id="mic-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
                                 src="./img/big-mic-on.png" alt="" title="关闭麦克风">
                         </div> -->
                         <div id="mask_main" class="mask col-div">
                             <!-- “摄像头未开启”遮罩 -->
                             <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
-                            <img style="width: 63px; height: 69px; z-index: 10;" src="./img/camera-max.png" alt="">
-                            <div style="height: 10px"></div>
+                            <img style="width: 63rem; height: 69rem; z-index: 10;" src="./img/camera-max.png" alt="">
+                            <div style="height: 10rem"></div>
                             <div style="z-index: 10">摄像头未打开</div>
                         </div>
                     </div>

From 4bff5e896b1acf35fe1a3dfbfa8542651a6e20ba Mon Sep 17 00:00:00 2001
From: unknown <1162963624@qq.com>
Date: Tue, 1 Dec 2020 10:04:23 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=89=93=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/css/index.css | 272 ++++++++++++++++++++++-----------------------
 dist/css/room.css  |  21 ++--
 dist/zhibo.html    | 124 +++++++++++++++------
 3 files changed, 235 insertions(+), 182 deletions(-)

diff --git a/dist/css/index.css b/dist/css/index.css
index 616d855..4d93271 100644
--- a/dist/css/index.css
+++ b/dist/css/index.css
@@ -45,16 +45,16 @@ div{
     align-items: center;
 }
 #login-card{
-    width: 450px;
-    height: 500px;
+    width: 450rem;
+    height: 500rem;
     display: flex;
     /* justify-content: center; */
     align-items: center;
     background-color: white;
 }
 .login-card{
-    width: 360px;
-    height: 450px;
+    width: 360rem;
+    height: 450rem;
     background-color: white;
     margin: 0 auto;
     display: flex;
@@ -62,8 +62,8 @@ div{
     align-items: center;
 }
 .popover{
-    min-width: 300px;
-    max-width: 1000px;
+    min-width: 300rem;
+    max-width: 1000rem;
     border: 0;
     white-space: nowrap;
     /* overflow: hidden; */
@@ -74,7 +74,7 @@ div{
 }
 .popover-body>div{
     width: 100%;
-    height: 35px;
+    height: 35rem;
     justify-content: center;
     cursor: default;
 }
@@ -94,29 +94,29 @@ div{
 .device-testing-btn{
     color: #515151;
     cursor: pointer;
-    margin-top: -14px;
+    margin-top: -14rem;
     opacity: 0.8;
 }
 .device-connect-list{
-    width: 310px;
-    height: 70px;
+    width: 310rem;
+    height: 70rem;
     position: absolute;
-    bottom: 50px;
+    bottom: 50rem;
     background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 5rem;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
     justify-content: space-around;
-    padding: 0 10px;
+    padding: 0 10rem;
 }
 .device-connect-list::before{
     content: '';
     width: 0;
     height: 0;
-    border: 8px transparent solid; 
+    border: 8rem transparent solid; 
     border-top-color: rgba(0, 0, 0, 0.2);
     opacity: 0.6;
     position: absolute;
-    bottom: -16px;
+    bottom: -16rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -124,29 +124,29 @@ div{
     content: '';
     width: 0;
     height: 0;
-    border: 7px transparent solid; 
+    border: 7rem transparent solid; 
     border-top-color: #fff;
     position: absolute;
-    bottom: -14px;
+    bottom: -14rem;
     left: 50%;
     transform: translateX(-50%);
 }
 .connect{
-    width: 28px;
-    height: 64px;
-    font-size: 28px;
+    width: 28rem;
+    height: 64rem;
+    font-size: 28rem;
     text-align: center;
     position: relative;
     opacity: 0.8;
 }
 .device-icon{
-    width: 20px;
-    height: 20px;
-    margin-right: 3px;
+    width: 20rem;
+    height: 20rem;
+    margin-right: 3rem;
     display: block;
     text-align: center;
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 20rem;
+    line-height: 20rem;
 }
 #device-testing-root {
     width: 100%;
@@ -160,10 +160,10 @@ div{
     background: rgba(0, 0, 0, 0.1);
 }
 .device-testing-card{
-    width: 640px;
-    height: 480px;
+    width: 640rem;
+    height: 480rem;
     background: #F7F7F7;
-    border-radius: 10px;
+    border-radius: 10rem;
     position: relative;
     display: block;
     z-index: 999;
@@ -172,49 +172,49 @@ div{
     display: block;
 }
 .testing-title{
-    font-size: 34px;
+    font-size: 34rem;
     justify-content: center;
-    margin-top: 55px;
+    margin-top: 55rem;
     color: #201e1ee5;
 }
 .testing-prepare-info{
-    font-size: 16px;
+    font-size: 16rem;
     justify-content: center;
-    margin-top: 25px;
+    margin-top: 25rem;
     color: #585656e5;
 }
 .device-testing-close-btn{
-    width: 25px;
-    height: 25px;
+    width: 25rem;
+    height: 25rem;
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 8rem;
+    right: 8rem;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 20rem;
 }
 .device-display{
-    margin-top: 40px;
+    margin-top: 40rem;
     justify-content: center;
 }
 .device{
-    width: 46px;
-    height: 46px;
+    width: 46rem;
+    height: 46rem;
     position: relative;
     justify-content: center;
-    font-size: 38px;
+    font-size: 38rem;
 }
 .device:not(:first-child){
-    margin-left: 60px;
+    margin-left: 60rem;
 }
 .device:not(:first-child).safari{
-    margin-left: 100px;
+    margin-left: 100rem;
 }
 .device::before{
     content: '';
-    width: 28px;
-    height: 28px;
+    width: 28rem;
+    height: 28rem;
     position: absolute;
-    bottom: -34px;
+    bottom: -34rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -229,82 +229,82 @@ div{
 @keyframes device-loading {
     0%{
         width: 0%;
-        border-radius: 6px 0 0 6px;
+        border-radius: 6rem 0 0 6rem;
     }
     50%{
         width: 50%;
-        border-radius: 6px 0 0 6px;
+        border-radius: 6rem 0 0 6rem;
     }
     100%{
         width: 100%;
-        border-radius: 6px;
+        border-radius: 6rem;
     }
 }
 .loading-background{
-    width: 350px;
-    height: 3px;
-    border-radius: 6px;
-    margin: 20px auto 0;
+    width: 350rem;
+    height: 3rem;
+    border-radius: 6rem;
+    margin: 20rem auto 0;
     background: #bfbfbf;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }
 .device-loading{
-    height: 3px;
+    height: 3rem;
     background-color: #808080;
     animation: device-loading 2s;
     animation-fill-mode: both;
 }
 .connect-info{
-    margin-top: 60px;
+    margin-top: 60rem;
     display: flex;
-    height: 48px;
+    height: 48rem;
     justify-content: center;
 }
 .connect-attention-container{
     position: relative;
-    margin-left: 3px;
+    margin-left: 3rem;
 }
 .connect-attention-icon{
-    font-size: 20px;
+    font-size: 20rem;
     color: red;
 }
 .connect-attention-info{
-    padding: 8px 12px;
-    min-width: 120px;
-    min-height: 50px;
+    padding: 8rem 12rem;
+    min-width: 120rem;
+    min-height: 50rem;
     background: rgba(0, 0, 0, 0.6);
-    border-radius: 10px;
+    border-radius: 10rem;
     color: #fff;
     position: absolute;
     right: 0;
     bottom: 100%;
-    transform: translate(20px, -10px);
+    transform: translate(20rem, -10rem);
     display: block;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: 12rem;
 }
 .connect-attention-info::after{
     content: '';
     width: 0;
     height: 0;
-    border: 10px transparent solid;
+    border: 10rem transparent solid;
     border-top-color: rgba(0, 0, 0, 0.6);
     position: absolute;
     left: 100%;
     top: 100%;
-    transform: translateX(-40px);
+    transform: translateX(-40rem);
 }
 .testing-btn-display{
     justify-content: center;
-    margin-top: 30px;
+    margin-top: 30rem;
 }
 .test-btn{
-    width: 200px;
-    height: 44px;
+    width: 200rem;
+    height: 44rem;
     background: #006EFF;
-    border-radius: 5px;
+    border-radius: 5rem;
     text-align: center;
     color: #fff;
     justify-content: center;
@@ -318,35 +318,35 @@ div{
 .device-testing-title{
     justify-content: center;
     width: 100%;
-    margin-top: 40px;
+    margin-top: 40rem;
 }
 .testing{
-    width: 26px;
-    height: 26px;
+    width: 26rem;
+    height: 26rem;
     position: relative;
     justify-content: center;
     text-align: center;
-    font-size: 24px;
-    line-height: 24px;
+    font-size: 24rem;
+    line-height: 24rem;
 }
 .testing:not(:first-child){
-    margin-left: 90px;
+    margin-left: 90rem;
 }
 .testing:not(:first-child)::before {
     content: '';
-    width: 70px;
-    height: 2px;
+    width: 70rem;
+    height: 2rem;
     position: absolute;
     top: 50%;
-    left: -80px;
+    left: -80rem;
     background: #bfbfbf;
 }
 .testing:not(:first-child).safari{
-    margin-left: 150px;
+    margin-left: 150rem;
 }
 .testing:not(:first-child).safari::before{
-    width: 130px;
-    left: -140px;
+    width: 130rem;
+    left: -140rem;
 }
 .testing.complete {
     cursor: pointer;
@@ -359,27 +359,27 @@ div{
     display: block;
 }
 .device-list{
-    margin-left: 140px;
-    margin-top: 30px;
+    margin-left: 140rem;
+    margin-top: 30rem;
 }
 .device-select{
-    width: 260px;
-    height: 30px;
-    margin-left: 20px;
-    padding: 0 10px;
-    border-radius: 4px;
+    width: 260rem;
+    height: 30rem;
+    margin-left: 20rem;
+    padding: 0 10rem;
+    border-radius: 4rem;
 }
 .camera-video{
-    width: 300px;
-    height: 180px;
+    width: 300rem;
+    height: 180rem;
     display: block;
-    margin: 30px auto 0;
+    margin: 30rem auto 0;
 }
 .testing-info-container{
     display: block;
     position: absolute;
-    bottom: 50px;
-    margin-top: 24px;
+    bottom: 50rem;
+    margin-top: 24rem;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -389,69 +389,69 @@ div{
     display: block;
 }
 .button-list{
-    margin-top: 20px;
-    width: 300px;
+    margin-top: 20rem;
+    width: 300rem;
     justify-content: space-around;
 }
 .fail-button{
-    border: 1px solid #006EFF;
-    border-radius: 8px;
+    border: 1rem solid #006EFF;
+    border-radius: 8rem;
     color: #006EFF;
-    padding: 6px 14px;
+    padding: 6rem 14rem;
     cursor: pointer;
 }
 .success-button{
-    border: 1px solid #006EFF;
-    border-radius: 8px;
+    border: 1rem solid #006EFF;
+    border-radius: 8rem;
     background: #006EFF;
     color: #fff;
-    padding: 6px 14px;
+    padding: 6rem 14rem;
     cursor: pointer;
 }
 .audio-control{
-    width: 320px;
+    width: 320rem;
     display: block;
-    margin: 40px auto 0;
+    margin: 40rem auto 0;
 }
 .audio-control-info{
-    margin: 0px auto 20px 6px;
+    margin: 0rem auto 20rem 6rem;
     color: #5f5f5f;
 }
 .mic-testing-container{
     display: block;
-    margin-top: 30px;
+    margin-top: 30rem;
 }
 .mic-testing-info{
-    margin-left: 140px;
+    margin-left: 140rem;
     color: #bbbbbb;
-    font-size: 14px;
+    font-size: 14rem;
 }
 .mic-bar-container{
     justify-content: center;
-    margin-top: 10px;
+    margin-top: 10rem;
 }
 .mic-bar{
-    width: 10px;
-    height: 30px;
-    border: 1px solid #cccccc;
-    border-radius: 1px;
+    width: 10rem;
+    height: 30rem;
+    border: 1rem solid #cccccc;
+    border-radius: 1rem;
 }
 .mic-bar:not(:first-child){
-    margin-left: 3px;
+    margin-left: 3rem;
 }
 .mic-bar.active{
     background: #006EFF;
 }
 .testing-index-list{
-    margin-top: 40px;
+    margin-top: 40rem;
     display: block;
 }
 .testing-index-group{
     width: 55%;
     display: flex;
     justify-content: space-between;
-    margin-top: 14px;
-    margin: 10px auto 0;
+    margin-top: 14rem;
+    margin: 10rem auto 0;
 }
 @keyframes loading-circle{
     0% {
@@ -472,51 +472,51 @@ div{
 }
 .network-loading::before{
     content: '';
-    width: 16px;
-    height: 16px;
+    width: 16rem;
+    height: 16rem;
     background: url('../img/loading.png');
     background-size: 100% 100%;
     animation: loading-circle 2s linear infinite;
 }
 .testing-footer{
-    margin-top: 70px;
+    margin-top: 70rem;
     justify-content: center;
 }
 .device-report-list{
     display: block;
-    margin-top: 40px;
+    margin-top: 40rem;
 }
 .device-report{
     width: 60%;
-    margin: 20px auto 0;
+    margin: 20rem auto 0;
     justify-content: space-between;
 }
 .report-icon{
-    width: 24px;
-    height: 24px;
-    margin-right: 20px;
+    width: 24rem;
+    height: 24rem;
+    margin-right: 20rem;
     justify-content: center;
-    font-size: 22px;
-    line-height: 22px;
+    font-size: 22rem;
+    line-height: 22rem;
     color: #515151;
 }
 .device-name{
-    width: 280px;
-    height: 24px;
+    width: 280rem;
+    height: 24rem;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .device-report-footer{
-    margin-top: 50px;
+    margin-top: 50rem;
     justify-content: center;
 }
 .device-report-btn{
-    width: 160px;
-    height: 40px;
-    border: 1px solid;
-    border-radius: 6px;
+    width: 160rem;
+    height: 40rem;
+    border: 1rem solid;
+    border-radius: 6rem;
     justify-content: center;
     cursor: pointer;
 }
@@ -527,5 +527,5 @@ div{
 .testing-finish{
     background: #006EFF;
     color: #fff;
-    margin-left: 60px;
+    margin-left: 60rem;
 }
\ No newline at end of file
diff --git a/dist/css/room.css b/dist/css/room.css
index c3d6992..7d617ab 100644
--- a/dist/css/room.css
+++ b/dist/css/room.css
@@ -15,7 +15,7 @@ body{
 video{
     background-color: #d8d8d8;
 }
-/* @media screen and (min-width:960px) {
+/* @media screen and (min-width:960rem) {
     video{
         width: auto !important;
         height: 100% !important;
@@ -28,7 +28,7 @@ video{
         align-items: center;
     }
 }
-@media screen and (max-width:960px) {
+@media screen and (max-width:960rem) {
     video{
         width: 100% !important;
         height: auto !important;
@@ -43,12 +43,13 @@ video{
 } */
 #room-root{
     width: 100%;
-    height: 100%;
-    min-width: 1500px;
-    min-height: 700px;
+    height: 750rem;
+    /* min-width: 1500rem; */
+    /* min-height: 700rem; */
     display: none;
     align-items: flex-start;
-    padding: 16px;
+    padding: 16rem;
+    background-color: #F5F5F5;
 }
 .member{
     cursor: default;
@@ -66,14 +67,14 @@ video{
 }
 #video-grid>div{
     position: relative;
-    padding: 10px;
+    padding: 10rem;
 }
 #main-video{
     width: 100%;
     height: 100%;
-    padding: 10px;
+    padding: 10rem;
     grid-area: 1/1/3/4;
-    border-radius: 17px;
+    border-radius: 17rem;
 }
 .video-box{
     width: 100%;
@@ -83,7 +84,7 @@ video{
     width: 100%;
     height: 100%;
     position: absolute;
-    font-size: 14px; 
+    font-size: 14rem; 
     color: #888888; 
     z-index: 9; 
     justify-content: center
diff --git a/dist/zhibo.html b/dist/zhibo.html
index 53cec84..698d50b 100644
--- a/dist/zhibo.html
+++ b/dist/zhibo.html
@@ -8,20 +8,71 @@
     <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
     <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./css/room.css">
+    <script>
+        (function (designWidth, maxWidth) {
+            var doc = document,
+                win = window,
+                docEl = doc.documentElement,
+                remStyle = document.createElement("style"),
+                tid;
+
+            function refreshRem() {
+
+                var width = docEl.getBoundingClientRect().width;
+                // maxWidth = maxWidth || 540; //不需要判断最大宽度
+                // width > maxWidth && (width = maxWidth);
+                var rem = width * 100 / designWidth;
+                console.log(rem)
+
+                remStyle.innerHTML = 'html{font-size:' + rem / 100 + 'px;}';
+            }
+
+            if (docEl.firstElementChild) {
+                docEl.firstElementChild.appendChild(remStyle);
+            } else {
+                var wrap = doc.createElement("div");
+                wrap.appendChild(remStyle);
+                doc.write(wrap.innerHTML);
+                wrap = null;
+            }
+            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+            refreshRem();
+
+            win.addEventListener("resize", function () {
+                clearTimeout(tid); //防止执行两次
+                tid = setTimeout(refreshRem, 300);
+            }, false);
+
+            win.addEventListener("pageshow", function (e) {
+                if (e.persisted) { // 浏览器后退的时候重新计算
+                    clearTimeout(tid);
+                    tid = setTimeout(refreshRem, 300);
+                }
+            }, false);
+
+            if (doc.readyState === "complete") {
+                doc.body.style.fontSize = "16px";
+            } else {
+                doc.addEventListener("DOMContentLoaded", function (e) {
+                    doc.body.style.fontSize = "16px";
+                }, false);
+            }
+        })(1366, 1024);
+    </script>
     <style>
         #member-list > div{
-            padding: 32px;
-            border-bottom: 1px solid #EEEEEE;
+            padding: 13rem;
+            border-bottom: 1rem solid #EEEEEE;
         }
         .liaotian{
             grid-area: 3/1/4/4;
-            margin-top: 28px;
+            margin-top: 28rem;
             height: 90%;
-            margin-left: 10px;
+            margin-left: 10rem;
             width: 98%;
             background-color: #fff;
-            border-radius: 17px;
-            padding: 24px 28px 14px 28px !important;
+            border-radius: 17rem;
+            padding: 24rem 28rem 14rem 28rem !important;
             display: flex;
             flex-direction: column;
         }
@@ -35,42 +86,43 @@
         }
         .wenzi > div{
             width: 100%;
-            font-size: 11px;
+            font-size: 11rem;
         }
         .wenzi > div >p:first-child {
-            margin-right: 33px;
+            margin-right: 33rem;
         }
         .wenzi > div >p span{
             color: #08AE98;
         }
         .fasongkuang{
             width: 100%;
-            height: 47px;
+            height: 29rem;
             display: flex;
             align-items: flex-end;
             justify-content: space-between;
             flex-shrink: 0;
-            border-top: 1px solid #DCDFE0;
+            border-top: 1rem solid #DCDFE0;
         }
         .fasongkuang input{
-            font-size: 11px;
+            font-size: 11rem;
             color: #333;
-            width: 600px;
+            width: 430rem;
             border: none;
             
         }
         .fasonganniu{
             display: flex;
-            font-size: 11px;
+            font-size: 11rem;
             color: #08AE98;
             align-items: center;
         }
         .fasonganniu img{
-            width: 15px;
-            height: 12px;
+            width: 15rem;
+            height: 12rem;
+            margin-left: 7rem;
         }
         .fasongkuang input::placeholder{
-            font-size: 11px;
+            font-size: 11rem;
         }
         .fasongkuang input:focus{ border: none; background: #fff; outline: none;}
     </style>
@@ -315,37 +367,37 @@
         <!-- 聊天室页面 -->
         <div id="room-root" class="col-div">
             <!-- header -->
-            <div class="row-div card" style="width: 100%; height: 65px; justify-content: space-between;border-radius: 17px;">
+            <div class="row-div card" style="width: 100%; height: 65rem; justify-content: space-between;border-radius: 17rem;">
                 <!-- 腾讯云logo -->
-                <div class="row-div" style="height: 100%; width: 230px; justify-content: center">
+                <div class="row-div" style="height: 100%; width: 230rem; justify-content: center">
                     
-                    <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">直播页面</div>
+                    <div style="width: 86rem; height: 23rem; font-size: 18rem; color: #333333">直播页面</div>
                 </div>
                 <!-- 分享屏幕 退出 按钮 -->
-                <div class="row-div" style="height: 100%; width: auto;margin-right: 28px;">
-                    <img id="screen-btn" style="width: 45px; height: 45px" src="./img/screen-off.png" alt="">
-                    <div style="width: 20px"></div>
-                    <img id="logout-btn" style="width: 45px; height: 45px" src="./img/logout.png" alt="">
+                <div class="row-div" style="height: 100%; width: auto;margin-right: 28rem;">
+                    <img id="screen-btn" style="width: 45rem; height: 45rem" src="./img/screen-off.png" alt="">
+                    <div style="width: 20rem"></div>
+                    <img id="logout-btn" style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
                 </div>
                 
                 
             </div>
             <!-- content -->
-            <div class="row-div" style="height: 100%; width: 100%; padding: 10px">
-                <div class="col-div" style="width: 340px; height: 100%; padding: 10px">
-                    <div class="col-div card" style="width: 100%; height: 100%; padding: 23px;border-radius: 17px;">
+            <div class="row-div" style="height: 100%; width: 100%; padding: 10rem">
+                <div class="col-div" style="width: 340rem; height: 100%; padding: 10rem">
+                    <div class="col-div card" style="width: 100%; height: 100%; padding: 23rem;border-radius: 17rem;font-size: 14rem;">
                         <!-- 成员列表 -->
-                        <div style="width: 100%;padding-bottom: 11px;border-bottom: 1px solid #EEEEEE;">上课人员</div>
+                        <div style="width: 100%;padding-bottom: 11rem;border-bottom: 1rem solid #EEEEEE;">上课人员</div>
                         <div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
                             <!-- member -->
-                            <div id="member-me" style="width: 100%; padding-left: 20px;">
+                            <div id="member-me" style="width: 100%; padding-left: 20rem;">
                                 <div class="row-div member"
-                                    style="width: 100%; height: 50px; justify-content: space-between">
+                                    style="width: 100%; height: 50rem; justify-content: space-between">
                                     <div class="member-id">(我)</div>
-                                    <div class="row-div" style="width:100px; height: 27px; justify-content: center">
+                                    <div class="row-div" style="width:100rem; height: 20rem; justify-content: center">
                                         <img id="video-btn" class="member-video-btn" style="height: 100%" src="./img/camera-on.png"
                                             alt="">
-                                        <div style="width: 18px"></div>
+                                        <div style="width: 18rem"></div>
                                         <img id="mic-btn" class="member-audio-btn" style="height: 100%" src="./img/mic-on.png"
                                             alt="">
                                     </div>
@@ -361,17 +413,17 @@
                     <div id="main-video" class="video-box col-div" style="justify-content: flex-end">
                         <!-- 主视频控制按钮 -->
                         <!-- <div id="main-video-btns" class="row-div"
-                            style="width: 156px; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
-                            <img id="video-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
+                            style="width: 156rem; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
+                            <img id="video-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
                                 src="./img/big-camera-on.png" alt="" title="关闭摄像头">
-                            <img id="mic-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
+                            <img id="mic-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
                                 src="./img/big-mic-on.png" alt="" title="关闭麦克风">
                         </div> -->
                         <div id="mask_main" class="mask col-div">
                             <!-- “摄像头未开启”遮罩 -->
                             <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
-                            <img style="width: 63px; height: 69px; z-index: 10;" src="./img/camera-max.png" alt="">
-                            <div style="height: 10px"></div>
+                            <img style="width: 63rem; height: 69rem; z-index: 10;" src="./img/camera-max.png" alt="">
+                            <div style="height: 10rem"></div>
                             <div style="z-index: 10">摄像头未打开</div>
                         </div>
                     </div>