较小高度时的界面适配 #18

itorr · Aug 26, 2022 · bc717b8 · bc717b8
1 parent 0edf8ab
commit bc717b8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/html/document.js b/html/document.js
@@ -118,7 +118,7 @@ const ctx = canvas.getContext('2d');
 
 const resize = _=>{
     const { offsetWidth, offsetHeight } = htmlEl;
-    width = Math.min(offsetWidth,800);
+    width = Math.min(offsetWidth,600);
     height = 800;
 
     canvas.width = width;

diff --git a/html/document.less b/html/document.less
@@ -49,22 +49,10 @@ a{
     display: block;
     height:100%;
 }
-canvas{
-    position: absolute;
-    // box-shadow:0 0 0 2px blue;
-    // top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    margin:0 auto;
-    // width: 100vw;
-    pointer-events: none;
-}
 .single-box{
     margin:140px auto 0;
-    width: 200px;
+    // width: 200px;
     height: 500px;
-    // box-shadow:0 0 0 2px blue;
     position: relative;
 
     position: absolute;
@@ -73,6 +61,16 @@ canvas{
     right:0;
     pointer-events: none;
 
+    canvas{
+        position: absolute;
+        // top:0;
+        left:0;
+        right:0;
+        bottom:0;
+        margin:0 auto;
+        // width: 100vw;
+        pointer-events: none;
+    }
     .main{
         // width: 140px;
         // height: 200px;
@@ -84,7 +82,9 @@ canvas{
         height: var(--main-height);
 
         position: absolute;
-        left: calc( 200px / 2 - var(--main-width) / 2 );
+        left: 0;
+        right:0;
+        margin:0 auto;
         // top: calc( 240px - var(--main-height) );
         bottom: 260px;
         // box-shadow:0 0 0 2px red;
@@ -105,7 +105,9 @@ canvas{
         width: 160px;
         height: 20px;
         position: absolute;
-        left: 20px;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
         bottom: 0;
         // box-shadow:0 0 0 2px green;
         background: rgba(255,255,255,.5) no-repeat 50% 50%;
@@ -198,12 +200,30 @@ html[data-permission-state="true"]{
 }
 
 
-@media (max-height:800px) {
+@media (max-height:800px) and (min-height:600px) {
     .app{
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         min-height: 600px;
     }
+}
+@media (max-height:600px) {
+    .single-box{
+        transform: scale(.7);
+        transform-origin: 50% 100%;
+    }
+}
+@media (max-height:450px) {
+    .single-box{
+        transform: scale(.6);
+        transform-origin: 50% 100%;
+    }
+}
+@media (max-height:350px) {
+    .single-box{
+        transform: scale(.5);
+        transform-origin: 50% 100%;
+    }
 }
diff --git a/html/index.html b/html/index.html
@@ -11,8 +11,8 @@
 </head>
 <body>
     <div class="app">
-        <canvas></canvas>
         <div class="single-box">
+            <canvas></canvas>
             <div class="main"></div>
             <div class="bed"></div>
         </div>