移动端响应式问题：作品集着陆区容器收缩至屏幕左上角

问题原因分析 #

1. 子元素高度超出父容器：.introContent 设置了 height:100vh，但父容器 #intro 的高度是 calc(100vh - 6rem)，子元素高度大于父容器，破坏了Flex布局的正常排列。
2. 宽度计算异常：#intro 使用 width:100vw，在部分移动端浏览器中会包含滚动条宽度，导致容器宽度超出预期或布局错位。
3. 样式类名不匹配：React组件中Hello文本的className是welcome，但CSS中对应的样式类是.hello，导致该文本样式未生效。

修正后的代码 #

React组件（修正类名）

import React from "react";
import "./intro.css";
import headshot from "../../img/headshot1.png";

const Intro = () => {
    return (
        <section id="intro">
            <div className="introContent">
                <span className="hello">Hello,</span>
                <span className="introText">I'm <span className="introName">Harrison Miner</span><br/>Full-Stack Web Developer</span>
                <p className="introPara">Welcome to my digital realm! I'm a passionate Full Stack Web Developer with<br/> a knack
                for crafting elegant solutions in the vast world of the web.</p>
            </div>
            <img src={headshot} alt="headshot" className="headshot"/>
        </section> 
    )
}

export default Intro;

修正后的intro.css

#intro {
    height: calc(100vh - 6rem);
    display: flex;
    width: 100%; /* 替换100vw为100%，避免滚动条影响 */
    max-width: 85rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.headshot {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    object-fit: cover;
    height: 100%; /* 继承父容器高度，避免超出 */
    width: auto; /* 保持图片比例 */
}

.introContent {
    height: 100%; /* 继承父容器高度，确保内容在容器内居中 */
    padding: 2rem;
    font-size: 2rem;
    font-weight:700;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hello {
    font-size: 1.5rem;
    font-weight: 100;
}

.introName {
    color: rgb(148, 27, 12);
    -webkit-text-stroke: 1px black;
}

.introPara {
    font-size: medium;
    font-weight: 300;
    letter-spacing: .5px;
}

@media screen and (max-width:840px) {
    .headshot {
        right: -10vw;
    }
    .introContent {
        font-size: 10vw;
    }
    .hello {
        font-size: 4.5vw;
    }
}

额外说明 #

• 替换 width:100vw 为 width:100%：100% 会继承父元素（body）的宽度，避免因滚动条导致的横向布局问题。
• 子元素高度设为 100%：确保.introContent和.headshot的高度与父容器#intro一致，维持布局完整性。
• 统一类名：修正welcome为hello，确保样式正常应用。

内容的提问来源于stack exchange，提问作者Harry M.