本文将深入探讨如何利用CSS Flexbox布局和媒体查询解决在不同屏幕尺寸下图片与文本内容重叠的问题。通过移除绝对定位，采用弹性盒模型实现元素并排显示，并在屏幕宽度缩小时自动换行堆叠，同时结合媒体查询进行精细化样式调整，确保页面在各种设备上都能保持良好的视觉效果和用户体验。
响应式布局挑战：绝对定位的局限性
在网页开发中，实现元素在不同屏幕尺寸下保持良好布局是响应式设计的核心。然而，当页面元素（例如图片和文本区域）采用 position: absolute 进行定位时，它们会脱离正常的文档流。这意味着这些元素的位置是相对于其最近的已定位祖先元素确定的，而不是根据其他兄弟元素或容器的可用空间自动调整。
这种绝对定位的方法在固定布局中可能有效，但一旦屏幕尺寸发生变化，元素之间不会自动响应和调整位置，极易导致内容重叠，破坏页面的可读性和美观性。例如，当屏幕宽度缩小到笔记本电脑尺寸时，一个绝对定位的图片可能会覆盖住旁边的文本区域，造成糟糕的用户体验。
我们的目标是实现一种灵活的布局：在屏幕足够宽时，图片和文本并排显示；当屏幕变窄时，图片能够优雅地移动到文本的上方或下方，而不是与之重叠。
Flexbox核心解决方案：构建弹性布局
为了解决绝对定位带来的重叠问题，CSS Flexbox（弹性盒模型）提供了一种更强大、更灵活的布局方式。通过将容器设置为Flex容器，其子元素（Flex项）将能够自动调整大小和位置，以适应可用空间。
关键Flexbox属性：
- display: flex: 将父容器 (.home-page) 转换为Flex容器，使其子元素 (.text-zone 和 .profile-img) 成为Flex项。
- flex-wrap: wrap: 这是实现元素在屏幕缩小后“堆叠”效果的关键。当Flex容器的宽度不足以容纳所有Flex项时，flex-wrap: wrap 会允许Flex项换行到下一行。
- align-items: center: 垂直居中对齐Flex容器内的Flex项。
- justify-content: center: 水平居中对齐Flex容器内的Flex项。
- min-height: 100vh: 确保Flex容器至少占据整个视口的高度，这有助于在内容较少时保持页面的垂直居中效果。
JSX结构（保持不变，但强调其作为Flex项的父容器）：
const Home = () => {
return (
<div className="container home-page"> {/* 这是Flex容器 */}
<div className = "text-zone"> {/* 这是Flex项 */}
<h1>My Name</h1>
<h2>Intern at xxx | Greater xxx Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div className = "profile-img"> {/* 这是Flex项 */}
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}SCSS样式更新：Flex容器
将.home-page的样式修改为使用Flexbox，并移除.text-zone和.profile-img上的position: absolute及其相关的定位属性（left, top, transform, right）。
.home-page {
display: flex;
flex-wrap: wrap; // 允许子元素换行
align-items: center; // 垂直居中对齐
justify-content: center; // 水平居中对齐
min-height: 100vh; // 确保容器至少占据整个视口高度
// ... 其他样式，如背景、字体等
}
// 移除 .text-zone 和 .profile-img 上的绝对定位
.home-page .text-zone {
// 移除 position: absolute; left; top; transform;
// ...
}
.home-page .profile-img {
// 移除 position: absolute; top; right; z-index: -1;
// ...
}通过这些修改，图片和文本区域将作为Flex项在.home-page容器内进行布局。当屏幕宽度不足时，flex-wrap: wrap将使它们自动换行，避免重叠。
媒体查询：实现精细化屏幕适配
虽然Flexbox提供了基础的弹性布局，但为了在不同屏幕尺寸上实现更精细的控制和最佳的用户体验，我们还需要结合媒体查询（@media）。媒体查询允许我们根据设备的特性（如屏幕宽度）应用不同的CSS样式。
针对.text-zone的调整：
在小屏幕上，文本区域通常希望居中对齐并占据更多可用宽度。而在较大的屏幕上，我们可以为其设置一个特定的宽度，并使其左对齐，以与旁边的图片形成良好布局。
.home-page {
.text-zone {
text-align: center; // 默认小屏幕居中
max-height: 90%;
padding: 0 16px; // 增加左右内边距，防止内容紧贴边缘
@media (min-width: 768px) { // 当屏幕宽度大于等于768px时
width: 40%; // 文本区域占据40%宽度
text-align: left; // 左对齐
}
// ... 其他样式
}
// ...
}针对.profile-img的调整：
图片在不同屏幕尺寸下可能需要不同的外边距。例如，在小屏幕上，当图片堆叠在文本上方或下方时，可能需要一些顶部外边距来增加间距。而在大屏幕上，为了实现特定的视觉效果，可能需要调整其右侧外边距。
.home-page {
.profile-img {
margin-top: 140px; // 默认（小屏幕）时增加顶部外边距，避免与上方内容重叠
padding: 0 16px; // 增加左右内边距
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
@media (min-width: 1200px) { // 当屏幕宽度大于等于1200px时
margin-right: -180px; // 调整右侧外边距，使图片更靠近文本或实现特定布局
margin-top: 0; // 大屏幕时重置顶部外边距，避免不必要的间距
}
// ... hover样式
}
// ...
}完整代码示例
结合上述Flexbox和媒体查询的优化，以下是完整的JSX和SCSS代码示例：
JSX结构 (src/components/Home/index.js 示例)
import { Link } from 'react-router-dom';
import Headshot from '../../assets/images/headshot.jpg'; // 假设图片路径正确
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at xxx | Greater xxx Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div className = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
export default Home;SCSS样式 (src/components/Home/_home.scss 示例)
.home-page {
display: flex;
flex-wrap: wrap; // 允许子元素换行
align-items: center; // 垂直居中对齐
justify-content: center; // 水平居中对齐
min-height: 100vh; // 确保容器至少占据整个视口高度
.text-zone {
// 移除 position: absolute; left; top; transform;
text-align: center; // 默认小屏幕居中
max-height: 90%;
padding: 0 16px; // 增加左右内边距
@media (min-width: 768px) { // 当屏幕宽度大于等于768px时
width: 40%; // 文本区域占据40%宽度
text-align: left; // 左对齐
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
}
.profile-img {
// 移除 position: absolute; top; right; z-index: -1;
margin-top: 140px; // 默认（小屏幕） 
