样式调整

src/views/withmind/assets/index.rem.css

@@ -3,20 +3,19 @@ html {
 }
 
 body {
-  /* .page 用 absolute 脱离文档流,需要给 body 一个最小高度让滚动条出现 */
-  min-height: 152.4rem;
-  position: relative;
+  /* 不需要 min-height 了,.page 用 relative 不会脱离文档流 */
+  margin: 0;
 }
 
 .page {
   background-color: rgba(255, 255, 255, 1);
-  /* 不用 transform 居中!transform 会让子元素 fixed/sticky 元素的 containing block 变成 .page,
-     导致 fixed 元素相对 .page 而不是 viewport。
-     改用 absolute 居中:position: absolute + left: 50% + margin-left: -25.6rem */
-  position: absolute;
-  left: 50%;
-  margin-left: -25.6rem;
-  width: 51.2rem;
+  /* 响应式居中:width 100% + max-width 51.2rem + margin: 0 auto
+     视口 >= 1920: .page 占满 1920 居中
+     视口 < 1920: .page 跟着视口收缩,小屏也能完整看到内容(可能有横向滚动条) */
+  position: relative;
+  width: 100%;
+  max-width: 51.2rem;
+  margin: 0 auto;
   /* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。
      152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */
   min-height: 152.4rem;
@@ -42,16 +41,17 @@ body {
 
 .section_2 {
   background-color: rgba(255, 255, 255, 0.95);
-  /* 用 fixed 而不是 sticky:sticky 会被 .page 的 transform 父链失效,
-     fixed 永远相对 viewport 定位,不受 transform 影响 */
+  /* 用 fixed 锁定顶部:fixed 相对 viewport 定位,不受任何父链影响 */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  /* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin) */
+  /* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin),
+     width 100% + max-width 51.2rem 跟 .page 同步 */
   margin: 0 auto;
   z-index: 1000;
-  width: 51.2rem;
+  width: 100%;
+  max-width: 51.2rem;
   height: 2.134rem;
   border: 1px solid rgba(239, 239, 239, 1);
 }

src/views/withmind/index.vue

@@ -753,7 +753,7 @@ export default {
           const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(4);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'skills') {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(2.5);
+          const top = el.getBoundingClientRect().top + window.pageYOffset - remToPx(1.5);
           window.scrollTo({ top: top, behavior: 'smooth' });
         } else if (id === 'row2') {
           // 应用实践 row2:scrollTo 偏移收窄,标题已对齐底部