移动端适配

Norcy · May 28, 2022 · 923735e · 923735e
1 parent 3bb147e
commit 923735e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "hexo": {
-    "version": "5.4.0"
+    "version": "5.4.2"
   },
   "dependencies": {
     "hexo": "^5.4.0",
@@ -24,4 +24,4 @@
     "hexo-server": "^0.3.1",
     "img2url": "^1.0.2"
   }
-}
+}
diff --git a/themes/Wikitten/source/css/_partial/article.styl b/themes/Wikitten/source/css/_partial/article.styl
@@ -10,7 +10,15 @@ article
     overflow: scroll
     background: color-background
     box-shadow 0 0px 0px #0000
-    width: 100%
+
+
+    @media mq-tablet
+        max-width: calc(100vw - 290px)
+    @media mq-mobile
+        width: 100vw
+    @media mq-mini
+        margin-bottom: 260px
+        width: 100vw
 
 .article-banner
     width:100%
@@ -416,7 +424,9 @@ ol.toc
     /*margin 1em 2em 0 0*/
 
 #toc
-    display flex
+    display: none
+    @media mq-normal
+        display flex
     position fixed
     align-items flex-start;
     font-size 12px

diff --git a/themes/Wikitten/source/css/_partial/header.styl b/themes/Wikitten/source/css/_partial/header.styl
@@ -89,12 +89,12 @@ $header-block-right
     padding: 0px !important
     @extend $header-block
     @extend $header-block-left
+
+#main-nav-mobile
     @media mq-mobile
         display: none
     @media mq-mini
         display: none
-
-#main-nav-mobile
     @media mq-tablet
         display: none
     @media mq-normal

diff --git a/themes/Wikitten/source/css/_partial/sidebar.styl b/themes/Wikitten/source/css/_partial/sidebar.styl
@@ -1,9 +1,19 @@
 #sidebar
-    width: 260px
-    position: fixed
+    @media mq-mobile
+        width: 100%
+    @media mq-mini
+        width: 100%
+    @media mq-tablet
+        width: 260px
+        position: fixed
+    @media mq-normal
+        width: 260px
+        position: fixed
+
     overflow-y:scroll;
     bottom:0;
     top: header-height;
+    padding-bottom: 20px;
     overscroll-behavior: none
     border-right: color-split-border solid 0.5px
 

diff --git a/themes/Wikitten/source/css/style.styl b/themes/Wikitten/source/css/style.styl
@@ -41,11 +41,15 @@ code
 .outer
     clearfix()
     display: flex
-    height: calc(100%-64px)
+    height: calc(100% - 64px)
     width: 100%
-    margin-top: header-height
+    @media mq-mobile
+        flex-direction: column
+        padding: 0
     @media mq-mini
+        flex-direction: column
         padding: 0
+    margin-top: header-height
 
 .left, .alignleft
     float: left
@@ -73,9 +77,14 @@ code
     overscroll-behavior: contain
     flex: 1
     width: 100%
-    padding-left: 290px
-    padding-right: 240px
-
+    overflow-x: hidden
+    @media mq-normal
+        padding-left: 290px
+        margin-right: 240px
+    @media mq-tablet
+        padding-left: 290px
+        max-width: calc(100% - 290px)
+
 @import "_extend"
 @import "_partial/header"
 @import "_partial/profile"