perf: 优化在移动设备的 UI 表现

pengzhanbo · Jan 6, 2024 · bc4100e · bc4100e
1 parent d25b830
commit bc4100e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/stylelint.config.js b/stylelint.config.js
@@ -15,5 +15,6 @@ export default stylelintConfig({
     'declaration-block-no-redundant-longhand-properties': [true, {
       ignoreShorthands: ['inset'],
     }],
+    'media-feature-range-notation': null,
   },
 })
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
@@ -35,33 +35,34 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-aside-wrapper {
   position: sticky;
   top: calc(var(--vp-nav-height) + 2rem);
+  display: none;
   width: 270px;
   padding: 1rem 0;
   margin-top: 2rem;
   margin-bottom: 12rem;
   margin-left: 2rem;
   text-align: center;
   border-left: solid 1px var(--vp-c-divider);
+}
 
-  img {
-    width: 50%;
-    margin: auto;
-  }
+.blog-aside-wrapper img {
+  width: 50%;
+  margin: auto;
+}
 
-  h3 {
-    margin-top: 1.5rem;
-    font-size: 16px;
-    font-weight: 600;
-  }
+.blog-aside-wrapper h3 {
+  margin-top: 1.5rem;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-@media (width <= 768px) {
+@media (width >= 768px) {
   .blog-aside-wrapper {
-    display: none;
+    display: block;
   }
 }
 

diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
@@ -208,7 +208,7 @@ div[class*="language-"] {
 }
 
 // narrow mobile
-@media (width <= 419px) {
+@media (max-width: 419px) {
   .plume-content {
     div[class*="language-"] {
       margin: 0.85rem -1.5rem;

diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
@@ -66,7 +66,7 @@
   opacity: 1;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .plume-content h1 {
     font-size: 32px;
     line-height: 40px;

diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
@@ -1,10 +1,4 @@
 .plume-content {
-  @media (width <= 419px) {
-    .vp-code-demo {
-      margin: 8px -12px;
-    }
-  }
-
   .hint-container {
     padding: 16px 16px 8px;
     font-size: var(--vp-custom-block-font-size);
@@ -193,6 +187,13 @@
     }
   }
 
+  /* stylelint-disable-next-line order/order */
+  @media (max-width: 419px) {
+    .vp-code-demo {
+      margin: 8px -12px;
+    }
+  }
+
   .task-list-container {
     padding-left: 0;