css兼容

iframe.css

@@ -3,7 +3,9 @@
     border-width: 0;
     left:50%;
     top:56rem;
-    transform: translate(-50%);
+    -webkit-transform: translate(-50%);
+        -ms-transform: translate(-50%);
+            transform: translate(-50%);
     width:100%;
     height: 63rem;
 }
@@ -31,8 +33,14 @@
     position: absolute;
     top:3rem;
     width: 100rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     font-size: 2.5rem;
 }
 
@@ -40,8 +48,14 @@
     position:absolute;
     top:3rem;
     width:100rem;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
     display:flex;
-    justify-content: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
 }
 
 .tradition{
@@ -70,8 +84,14 @@
     left:0;
     width: 100%;
     height:25rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     background-color: lightgray;
 }
 
@@ -92,8 +112,13 @@
     top:4rem;
     left:0;
     width: 100%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: space-around;
+    -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+            justify-content: space-around;
 }
 
 .info{

index.css

@@ -30,7 +30,7 @@
 }
 html,body{
     width: 100rem;
-    height: 100rem;
+    /* height: 100rem; */
     /* overflow: hidden; */
 }
 body{
@@ -48,7 +48,9 @@ body{
     border-width: 0;
     left:50%;
     top:0;
-    transform: translate(-50%);
+    -webkit-transform: translate(-50%);
+        -ms-transform: translate(-50%);
+            transform: translate(-50%);
     width:100%;
     height: 100%;
     background-color:darkseagreen;
@@ -76,8 +78,14 @@ body{
     top:40rem;
     left:0;
     width: 100%;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
     display:flex;
-    justify-content: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     font-size: 1rem;
     font-family:'Microsoft YaHei','Arial Negreta', 'Arial Normal', 'Arial';
     
@@ -86,9 +94,18 @@ body{
 
 .button{
     margin:0 0.8rem 0 0.8rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
 }
 
 
@@ -121,7 +138,9 @@ body{
     position: fixed;
     top:45%;
     left: 50%;
-    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+            transform: translateX(-50%);
     border-radius: 50px / 45px;
     color:#000000;
     font-size: 12px;
@@ -141,7 +160,9 @@ body{
     position: absolute;
     top: 37%;
     left: 50%;
-    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+            transform: translateX(-50%);
 }
 
 .ready:hover .herald{
@@ -152,16 +173,24 @@ body{
 
 
 .contact{
-    position: fixed;
-    top:20px;
-    right: 20px;
+    /* position: fixed; */
+    position:absolute;
+    top:1.2rem;
+    right: 1.5rem;
+    z-index:9999;
 }
 
 .contact-icon{
     width:105px;
     height:25px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    justify-content:space-between;
+    -webkit-box-pack:justify;
+    -webkit-justify-content:space-between;
+        -ms-flex-pack:justify;
+            justify-content:space-between;
 }
 
 .contact-content{
@@ -171,6 +200,29 @@ body{
     visibility: hidden;
 }
 
+/* @media screen and (min-width:320px) and (max-width:480px) {
+    .contact-icon{
+        width:5.4rem;
+        height:1.3rem;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack:justify;
+        -webkit-justify-content:space-between;
+            -ms-flex-pack:justify;
+                justify-content:space-between;
+    }
+    
+    .contact-content{
+        position: absolute;
+        top:1.17rem;
+        right:0;
+        visibility: hidden;
+    }
+} */
+
+
 .contact:hover .contact-content{
     visibility: visible;
 }
@@ -179,9 +231,20 @@ body{
     position: absolute;
     top:28px;
     left:28px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    
 
     font-size: 12px;;
     

index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8"/>
         <meta name="keywords" content="博博会,郑州,云展览"/>
         <meta name="description" content="导航页"/>
-        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
+        <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
         <link rel="stylesheet" href="index.css"/>
         <link rel="stylesheet" href="iframe.css"/>
         <!-- <link rel="icon" href="./icon.png"> -->
@@ -15,7 +15,7 @@
     </head>
     <body>
         <div id="base">
-            <img class="back-picture" alt="背景图片" class="back-image" src="./pic1-1.png"/>
+            <img class="back-picture" alt="背景图片" class="back-image" srcset="./pic1-1.png" src="./pic1-1.png"/>
             <div class="titles">
                 <img alt="博博会 中德人工智能研究院 四维时代" class="img1" src="./pic2-2.png"/>
             </div>

index.js

@@ -1,35 +0,0 @@
-let imgSizeAuto = function(){
-    let viewHeight = document.body.offsetHeight;
-    let viewWidth = document.body.offsetWidth;
-    let imgEles = document.getElementsByClassName('img');
-    let fontsize,ratefont = 0.259;
-    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';
-        }
-    }else{
-        let buttons = document.getElementsByClassName('buttons');
-        for(let b of buttons){
-            b.style.fontSize = '22px';
-        }
-    }
-
-}
-imgSizeAuto();
-window.onresize = imgSizeAuto;