兼容移动端

hec9527 · May 13, 2021 · 3e9da65 · 3e9da65
1 parent 6040fe0
commit 3e9da65
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 112 deletions.
diff --git a/src/css/index.css b/src/css/index.css
@@ -3,6 +3,7 @@
     padding: 0;
     margin: 0;
     list-style: none;
+    box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -65,11 +66,10 @@ body {
 }
 
 #scope {
-    padding: 0 32px 32px 32px;
+    padding: 0 48px 64px 48px;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    margin-bottom: 16px;
 }
 #scope div {
     font-size: 24px;
@@ -93,9 +93,10 @@ body {
     cursor: pointer;
     margin-bottom: 16px;
     transform: translateY(-2px);
-    transition: all 100ms linear;
+    transition: all 50ms ease-out;
+    outline: none;
 }
-.ctrl-box:hover {
+.ctrl-box:active:not(.disabled) {
     transform: none;
     box-shadow: none;
 }
@@ -108,18 +109,76 @@ body {
 }
 
 .grid-cell {
-    width: 106px;
-    height: 106px;
     border-radius: 8px;
     margin: auto;
     background-color: #ccc0b3;
     position: absolute;
 }
+
 .number-cell {
     border-radius: 6px;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    line-height: 110px;
+    display: grid;
+    place-items: center;
     text-align: center;
     position: absolute;
 }
+
+/* 移动端适配 */
+@media screen and (max-width: 780px) {
+    html,
+    body,
+    #continer {
+        display: block;
+        width: 100vw;
+        height: 100vh;
+    }
+    #continer {
+        width: 100%;
+        display: flex;
+        flex-direction: column-reverse;
+        border-radius: unset;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #gameBox {
+        all: initial;
+        display: grid;
+        place-items: center;
+        width: 100%;
+    }
+
+    #gameBox > ul {
+        width: 80rem;
+        height: 80rem;
+        margin-bottom: 10rem;
+    }
+
+    #mesBox {
+        width: 100%;
+        height: auto;
+        padding: 0 5rem;
+    }
+
+    #scope {
+        padding-bottom: 10rem;
+    }
+
+    #scope > * {
+        font-size: 8rem;
+    }
+
+    #ctrl {
+        all: initial;
+        width: 90rem;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+    }
+    .ctrl-box {
+        width: auto;
+        margin-bottom: 10rem;
+    }
+}
diff --git a/src/index.html b/src/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="./css/index.css" />
+        <script src="./js/rem.js"></script>
+        <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
+        <script>
+            new VConsole();
+        </script>
         <title>2048</title>
     </head>
     <body>
@@ -28,7 +33,6 @@ <h1>分数:</h1>
                 </div>
             </div>
         </div>
-
         <script src="./js/jquery-3.1.1.min.js"></script>
         <script src="./js/game-release-2.1.js"></script>
     </body>