hookehuyr

style(Home): 调整响应式布局的间距和字体大小

优化不同屏幕尺寸下的边距和内边距,使布局更紧凑
调整小屏幕下的字体大小,提升可读性
...@@ -479,7 +479,7 @@ const handleNewsClick = (item) => { ...@@ -479,7 +479,7 @@ const handleNewsClick = (item) => {
479 } 479 }
480 480
481 .ceremony-intro { 481 .ceremony-intro {
482 - padding: 1.5rem; 482 + padding: 0.5rem; /* 进一步从0.75rem减少到0.5rem */
483 } 483 }
484 484
485 .ceremony-title { 485 .ceremony-title {
...@@ -992,7 +992,7 @@ const handleNewsClick = (item) => { ...@@ -992,7 +992,7 @@ const handleNewsClick = (item) => {
992 .intro-container { 992 .intro-container {
993 position: relative; 993 position: relative;
994 width: 100%; 994 width: 100%;
995 - margin: 1rem; 995 + margin: 0.5rem; /* 从1rem减少到0.5rem */
996 border-radius: 1.17rem; 996 border-radius: 1.17rem;
997 border: 0.08rem solid #C1A16A; 997 border: 0.08rem solid #C1A16A;
998 overflow: hidden; 998 overflow: hidden;
...@@ -1099,7 +1099,8 @@ const handleNewsClick = (item) => { ...@@ -1099,7 +1099,8 @@ const handleNewsClick = (item) => {
1099 /* 响应式设计 */ 1099 /* 响应式设计 */
1100 @media (max-width: 48rem) { 1100 @media (max-width: 48rem) {
1101 .intro-container { 1101 .intro-container {
1102 - padding: 0.875rem; 1102 + margin: 0.375rem; /* 从默认0.5rem进一步减少 */
1103 + padding: 0.625rem; /* 从0.875rem减少 */
1103 } 1104 }
1104 1105
1105 .step-title-text { 1106 .step-title-text {
...@@ -1115,9 +1116,11 @@ const handleNewsClick = (item) => { ...@@ -1115,9 +1116,11 @@ const handleNewsClick = (item) => {
1115 } 1116 }
1116 } 1117 }
1117 1118
1118 -@media (max-width: 30rem) { 1119 +/* 中等小屏幕 (24rem - 30rem, 384px - 480px) */
1120 +@media (max-width: 30rem) and (min-width: 24rem) {
1119 .intro-container { 1121 .intro-container {
1120 - padding: 0.75rem; 1122 + margin: 0.25rem; /* 进一步减少margin */
1123 + padding: 0.5rem; /* 从0.75rem减少 */
1121 } 1124 }
1122 1125
1123 .step-title { 1126 .step-title {
...@@ -1126,12 +1129,11 @@ const handleNewsClick = (item) => { ...@@ -1126,12 +1129,11 @@ const handleNewsClick = (item) => {
1126 } 1129 }
1127 1130
1128 .step-title-text { 1131 .step-title-text {
1129 - font-size: 1.5rem; 1132 + font-size: 1.25rem; /* 调整为更合适的大小 */
1130 } 1133 }
1131 1134
1132 .decorative-line { 1135 .decorative-line {
1133 left: 1.8rem; 1136 left: 1.8rem;
1134 - /* 小屏幕下的装饰线样式,位置由JavaScript动态计算 */
1135 } 1137 }
1136 1138
1137 .more-button { 1139 .more-button {
...@@ -1145,6 +1147,68 @@ const handleNewsClick = (item) => { ...@@ -1145,6 +1147,68 @@ const handleNewsClick = (item) => {
1145 } 1147 }
1146 } 1148 }
1147 1149
1150 +/* 小屏幕 (20rem - 24rem, 320px - 384px) */
1151 +@media (max-width: 24rem) and (min-width: 20rem) {
1152 + .intro-container {
1153 + margin: 0.125rem; /* 最小化margin */
1154 + padding: 0.375rem; /* 从0.625rem减少 */
1155 + }
1156 +
1157 + .step-title {
1158 + top: 0.875rem;
1159 + left: 0.875rem;
1160 + }
1161 +
1162 + .step-title-text {
1163 + font-size: 1.125rem; /* 进一步减小 */
1164 + }
1165 +
1166 + .decorative-line {
1167 + left: 1.6rem;
1168 + }
1169 +
1170 + .more-button {
1171 + bottom: 0.875rem;
1172 + left: 0.875rem;
1173 + height: 1.375rem;
1174 + }
1175 +
1176 + .more-text {
1177 + font-size: 0.65rem;
1178 + }
1179 +}
1180 +
1181 +/* 超小屏幕 (小于20rem, 小于320px) */
1182 +@media (max-width: 20rem) {
1183 + .intro-container {
1184 + margin: 0.125rem; /* 保持最小margin */
1185 + padding: 0.25rem; /* 从0.5rem减少 */
1186 + }
1187 +
1188 + .step-title {
1189 + top: 0.75rem;
1190 + left: 0.75rem;
1191 + }
1192 +
1193 + .step-title-text {
1194 + font-size: 1rem; /* 最小尺寸 */
1195 + }
1196 +
1197 + .decorative-line {
1198 + left: 1.4rem;
1199 + }
1200 +
1201 + .more-button {
1202 + bottom: 0.75rem;
1203 + left: 0.75rem;
1204 + height: 1.25rem;
1205 + }
1206 +
1207 + .more-text {
1208 + font-size: 0.6rem;
1209 + }
1210 +}
1211 +
1148 /* 相关新闻样式 */ 1212 /* 相关新闻样式 */
1149 .news-section { 1213 .news-section {
1150 padding: 3rem 1.5rem; 1214 padding: 3rem 1.5rem;
......