使用rem完成自适应布局

index.css

@@ -20,6 +20,8 @@
     scrollbar-color: #b4bbc5 #f2f2f2;
     scrollbar-track-color: #b4bbc5 #f2f2f2;
     -ms-scrollbar-track-color: #b4bbc5 #f2f2f2;
+
+    font-size: 1vw;
 }
 
 *{
@@ -27,8 +29,8 @@
     padding: 0;
 }
 html,body{
-    width: 100%;
-    height: 100%;
+    width: 100rem;
+    height: 100rem;
     /* overflow: hidden; */
 }
 body{
@@ -36,8 +38,8 @@ body{
 }
 
 .base{
-    width:100%;
-    height: 100%;
+    width:100rem;
+    height: 56rem;
     position: relative;
 }
 
@@ -48,40 +50,42 @@ body{
     top:0;
     transform: translate(-50%);
     width:100%;
+    height: 100%;
     background-color:darkseagreen;
 }
 
 
 .titles{
     position:absolute;
-    top:12%;
-    width:100%;
+    top:7rem;
+    width:100rem;
     text-align: center;
 }
 
 .locate1{
-    top:20%;
+    top:11rem;
 }
 
 .locate2{
-    top:32%;
+    top:16rem;
 }
 
 .buttons{
     position:absolute;
-    bottom: 12%;
+    /* bottom: 12%; */
+    top:40rem;
     left:0;
     width: 100%;
     display:flex;
     justify-content: center;
-    font-size: 1.4em;
+    font-size: 1rem;
     font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
     
 }
 
 
 .button{
-    margin:0 20px 0 20px;
+    margin:0 0.1rem 0 0.1rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -124,7 +128,8 @@ body{
     padding:0 10px 0 10px;
     width: 25%;
     text-align: center;
-    visibility: hidden;
+    /* visibility: hidden; */
+    display: none;
 }
 
 .herald .toast{
@@ -140,7 +145,8 @@ body{
 }
 
 .ready:hover .herald{
-    visibility: visible;
+    /* visibility: visible; */
+    display: block;
 }
 
 
@@ -207,8 +213,69 @@ body{
     width: 75px;
 }
 
-.backcloth{
-    position:relative;
-    left: 0;
-    top:1080px;
-}
+
+
+img .img1{
+    height:2.4rem;
+}
+
+img .img2{
+    height:5.68rem;
+}
+
+img .img3{
+    height:3.5rem;
+}
+
+img .img4{
+    height:4.48rem;
+}
+
+/* 
+@media (min-width:1450px) and (max-width:1700px){
+    .back-picture{
+        position: absolute;
+        border-width: 0;
+        left:50%;
+        top:0;
+        transform: translate(-50%);
+        width:100%;
+        height: 90%;
+        background-color:darkseagreen;
+    }
+    .buttons{
+        position:absolute;
+        bottom: 25%;
+        left:0;
+        width: 100%;
+        display:flex;
+        justify-content: center;
+        font-size: 1.4em;
+        font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
+        
+    }
+}
+
+@media (max-width:1450px){
+    .back-picture{
+        position: absolute;
+        border-width: 0;
+        left:50%;
+        top:0;
+        transform: translate(-50%);
+        width:100%;
+        height: 80%;
+        background-color:darkseagreen;
+    }
+    .buttons{
+        position:absolute;
+        bottom: 35%;
+        left:0;
+        width: 100%;
+        display:flex;
+        justify-content: center;
+        font-size: 1.4em;
+        font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
+        
+    }
+} */

index.js

@@ -1,27 +1,35 @@
 let imgSizeAuto = function(){
-    let rateHs = [0.047,0.113,0.069,0.089,0.089,0.089];
-    let rateWs = [0.297,0.263,0.391,0.139,0.139,0.139]
-    let imgEles = document.getElementsByClassName('img');
     let viewHeight = document.body.offsetHeight;
     let viewWidth = document.body.offsetWidth;
+    let imgEles = document.getElementsByClassName('img');
     let fontsize,ratefont = 0.259;
-    for(let i = 0; i < imgEles.length; i++){
-        if(i <= rateHs.length){
-            let newWidth = viewWidth * rateWs[i];
-            imgEles[i].width = newWidth;
-            // console.log(imgEles[i].width);
+    if(viewWidth <= 1450){
+        let rateHs = [0.047,0.113,0.069,0.089,0.089,0.089];
+        let rateWs = [0.297,0.263,0.391,0.139,0.139,0.139] 
+        
+        for(let i = 0; i < imgEles.length; i++){
+            if(i <= rateHs.length){
+                let newWidth = viewWidth * rateWs[i];
+                imgEles[i].width = newWidth;
+                // console.log(imgEles[i].width);
+            }
+            if(i == 3){
+                fontsize = ratefont * imgEles[i].height;
+                console.log(fontsize);
+            }
+        }
+    
+        let buttons = document.getElementsByClassName('buttons');
+        for(let b of buttons){
+            b.style.fontSize = fontsize + 'px';
         }
-        if(i == 3){
-            fontsize = ratefont * imgEles[i].height;
-            console.log(fontsize);
+    }else{
+        let buttons = document.getElementsByClassName('buttons');
+        for(let b of buttons){
+            b.style.fontSize = '22px';
         }
     }
 
-    let buttons = document.getElementsByClassName('buttons');
-    for(let b of buttons){
-        b.style.fontSize = fontsize + 'px';
-    }
-    
 }
 imgSizeAuto();
 window.onresize = imgSizeAuto;