移动端下Hero图片内文字未实现响应式适配问题求助

问题原因 #

• 父容器.hero-image写死了固定高度300px，移动端屏幕宽度窄，文字折行后总高度远超300px，直接溢出容器
• 文字容器.hero-text没有设置宽度约束和内边距，小屏下文字会紧贴屏幕边缘，可读性差
• 没有针对移动端设置响应式字号，标题、正文默认字号在小屏上占用垂直空间过多
• 原居中方案用top:50% + transform实现，只适合固定高度内容，内容高度动态变化时容易出现偏移、溢出

修复代码 #

直接替换原有对应CSS即可，HTML结构无需改动：

/* The hero image */
.hero-image {
    /* 暗色遮罩提升文字可读性 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/intro-image-300px.jpg);
    background-color: #04AA6D;

    /* 替换固定高度为视口相对最小高度，内容过多时自动撑开 */
    min-height: 80vh;
    /* 增加内边距避免内容贴边 */
    padding: 4rem 1.5rem;
    box-sizing: border-box;

    /* 背景图适配 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    /* 改用Flex布局实现居中，适配动态高度内容 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero区域文字容器 */
.hero-text {
    text-align: center;
    color: white;
    /* 宽度适配：小屏占满宽度，大屏限制最大宽度提升可读性 */
    width: 100%;
    max-width: 768px;
}

/* 移动端响应式规则 */
@media (max-width: 768px) {
    .hero-image {
        min-height: 100vh;
        padding: 2rem 1rem;
    }
    .hero-text h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin: 0 0 1rem 0;
    }
    .hero-text p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 1.5rem 0;
    }
}

/* 修复按钮内链接默认样式异常 */
.hero-text button a {
    color: inherit;
    text-decoration: none;
}

优化说明 #

• 改用Flex居中方案后，不管文字内容多少，都会自动在Hero区域垂直水平居中，不会出现偏移
• 响应式字号设置会在768px宽度以下的设备自动缩小标题、正文字号，减少垂直空间占用
• 宽度约束和内边距设置保证文字和屏幕边缘始终有安全距离，不会出现贴边、溢出可视区域的问题
• 最小高度设置保证Hero区域在不同尺寸屏幕下都有足够的视觉占比，内容过多时会自动加高，不会出现文字溢出到其他区块的问题

内容的提问来源于stack exchange，提问作者CosmicBrain