利用js使得按钮字体随按钮缩放，但在移动端的效果依然不佳；利用flex布局使按钮字体居中

backcloth.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1921px" height="781px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 0 -1080 )">
+    <path d="M 0 1080  L 1921 1080  L 1921 1861  L 0 1861  L 0 1080  Z " fill-rule="nonzero" fill="#f2f2f2" stroke="none" />
+  </g>
+</svg>

index.css

@@ -1,14 +1,14 @@
 
 ::-webkit-scrollbar {
-    width: 0;
-    height: 8px;
+    width: 8px;
+    height: 0;
     background: #f2f2f2; 
-    background-color: transparent;
+    /* background-color: transparent; */
     padding-right: 2px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #b4bbc5;
+    background: #999ca0;
     border-radius: 10px;
     border: 0;
 }
@@ -29,7 +29,7 @@
 html,body{
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
 }
 body{
     position:relative;
@@ -45,8 +45,8 @@ body{
     position: absolute;
     border-width: 0;
     left:50%;
-    top:50%;
-    transform: translate(-50%,-50%);
+    top:0;
+    transform: translate(-50%);
     width:100%;
     background-color:darkseagreen;
 }
@@ -55,7 +55,6 @@ body{
 .titles{
     position:absolute;
     top:12%;
-    /* left:674px; */
     width:100%;
     text-align: center;
 }
@@ -75,7 +74,7 @@ body{
     width: 100%;
     display:flex;
     justify-content: center;
-    font-size: 22px;
+    font-size: 1.4em;
     font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
     
 }
@@ -83,14 +82,15 @@ body{
 
 .button{
     margin:0 20px 0 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 
 .text{
     position: absolute;
     left: inherit;
-    top:27px;
-    width: 267px;
     text-align: center;
     color:#FFFFFF;
     font-weight: normal;
@@ -205,4 +205,10 @@ body{
 
 .qrcode{
     width: 75px;
+}
+
+.backcloth{
+    position:relative;
+    left: 0;
+    top:1080px;
 }

index.js

@@ -0,0 +1,27 @@
+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 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(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';
+    }
+    
+}
+imgSizeAuto();
+window.onresize = imgSizeAuto;