Browse Source

无障碍功能适配窄屏(最小1280px)

任一存 3 years ago
parent
commit
db5635f34e
2 changed files with 31 additions and 2 deletions
  1. 13 1
      web/src/Help.vue
  2. 18 1
      web/src/views/accessibility.vue

+ 13 - 1
web/src/Help.vue

@@ -260,7 +260,7 @@ body {
   background: #F6F6F6;
 }
 main {
-  width: 1396px;
+  max-width: 1396px;
   background: #fff;
   margin-left: auto;
   margin-right: auto;
@@ -442,4 +442,16 @@ main {
     }
   }
 }
+
+@media screen and (max-width: 1500px) {
+  main {
+    width: 1280px;
+    > nav {
+      width: 350px;
+    }
+    > article {
+      width: 858px;
+    }
+  }
+}
 </style>

+ 18 - 1
web/src/views/accessibility.vue

@@ -214,7 +214,7 @@
       </li>
       <li>
         <button
-          class="special-color"
+          class="special-color screen-reading-accessibility"
           tabindex="0"
           aria-description="Screen Reading Accessibility"
           type="button"
@@ -1339,4 +1339,21 @@ a {
     }
   }
 }
+
+@media screen and (max-width: 1500px) {
+  .accessibility {
+    menu {
+      li {
+        button {
+          width: 90px !important;
+        }
+        .screen-reading-accessibility {
+          span {
+            margin-top: -5px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>