feat: 完成70%全局样式与可读性优化

pages/family/f05-article-detail.vue

@@ -131,7 +131,7 @@ const handleStateAction = () =>
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .article-detail-page {
   display: flex;
@@ -149,7 +149,7 @@ const handleStateAction = () =>
 }
 .article-card,
 .article-state-card {
-  @include adaptive.adaptive-family-content;
+  @include adaptive-family-content;
   box-sizing: border-box;
 }
 .article-card {
@@ -166,26 +166,26 @@ const handleStateAction = () =>
 }
 .article-card__category {
   color: $brand-red;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .article-card__title {
   margin-top: 14rpx;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 40rpx;
+  font-size: clamp(20px, 40rpx, 26px);
   font-weight: 700;
   line-height: 1.32;
 }
 .article-card__meta {
   margin-top: 16rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .article-card__summary {
   margin-top: 22rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   line-height: 1.6;
 }
 .article-card__divider {
@@ -195,14 +195,14 @@ const handleStateAction = () =>
 }
 .article-card__content {
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   line-height: 1.85;
   white-space: pre-wrap;
 }
 .article-card__views {
   margin-top: 30rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   text-align: right;
 }
 .article-state-card {
@@ -217,13 +217,13 @@ const handleStateAction = () =>
 .article-state-card > text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .article-state-card > text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .article-state-card .app-button {