hookehuyr

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

优化不同屏幕尺寸下的边距和内边距,使布局更紧凑
调整小屏幕下的字体大小,提升可读性
......@@ -479,7 +479,7 @@ const handleNewsClick = (item) => {
}
.ceremony-intro {
padding: 1.5rem;
padding: 0.5rem; /* 进一步从0.75rem减少到0.5rem */
}
.ceremony-title {
......@@ -992,7 +992,7 @@ const handleNewsClick = (item) => {
.intro-container {
position: relative;
width: 100%;
margin: 1rem;
margin: 0.5rem; /* 从1rem减少到0.5rem */
border-radius: 1.17rem;
border: 0.08rem solid #C1A16A;
overflow: hidden;
......@@ -1099,7 +1099,8 @@ const handleNewsClick = (item) => {
/* 响应式设计 */
@media (max-width: 48rem) {
.intro-container {
padding: 0.875rem;
margin: 0.375rem; /* 从默认0.5rem进一步减少 */
padding: 0.625rem; /* 从0.875rem减少 */
}
.step-title-text {
......@@ -1115,9 +1116,11 @@ const handleNewsClick = (item) => {
}
}
@media (max-width: 30rem) {
/* 中等小屏幕 (24rem - 30rem, 384px - 480px) */
@media (max-width: 30rem) and (min-width: 24rem) {
.intro-container {
padding: 0.75rem;
margin: 0.25rem; /* 进一步减少margin */
padding: 0.5rem; /* 从0.75rem减少 */
}
.step-title {
......@@ -1126,12 +1129,11 @@ const handleNewsClick = (item) => {
}
.step-title-text {
font-size: 1.5rem;
font-size: 1.25rem; /* 调整为更合适的大小 */
}
.decorative-line {
left: 1.8rem;
/* 小屏幕下的装饰线样式,位置由JavaScript动态计算 */
}
.more-button {
......@@ -1145,6 +1147,68 @@ const handleNewsClick = (item) => {
}
}
/* 小屏幕 (20rem - 24rem, 320px - 384px) */
@media (max-width: 24rem) and (min-width: 20rem) {
.intro-container {
margin: 0.125rem; /* 最小化margin */
padding: 0.375rem; /* 从0.625rem减少 */
}
.step-title {
top: 0.875rem;
left: 0.875rem;
}
.step-title-text {
font-size: 1.125rem; /* 进一步减小 */
}
.decorative-line {
left: 1.6rem;
}
.more-button {
bottom: 0.875rem;
left: 0.875rem;
height: 1.375rem;
}
.more-text {
font-size: 0.65rem;
}
}
/* 超小屏幕 (小于20rem, 小于320px) */
@media (max-width: 20rem) {
.intro-container {
margin: 0.125rem; /* 保持最小margin */
padding: 0.25rem; /* 从0.5rem减少 */
}
.step-title {
top: 0.75rem;
left: 0.75rem;
}
.step-title-text {
font-size: 1rem; /* 最小尺寸 */
}
.decorative-line {
left: 1.4rem;
}
.more-button {
bottom: 0.75rem;
left: 0.75rem;
height: 1.25rem;
}
.more-text {
font-size: 0.6rem;
}
}
/* 相关新闻样式 */
.news-section {
padding: 3rem 1.5rem;
......