本文旨在解决使用 CSS 创建响应式布局时，文本和图像在不同屏幕尺寸下自适应的问题。我们将探讨如何利用 Flexbox 布局模型，结合媒体查询，实现左右两栏结构在桌面端平分屏幕，在移动端垂直排列，并保证图片在各种屏幕尺寸下都能保持良好的比例和显示效果。本文将提供代码示例，并解释关键 CSS 属性的用法，助你构建灵活且美观的响应式网页。
响应式布局基础：Flexbox
Flexbox（弹性盒子布局）是 CSS3 中一个强大的布局模块，特别适合创建响应式和动态的界面。它允许你轻松控制元素的排列方向、对齐方式和尺寸。
关键属性：
- display: flex;: 将容器设置为 Flexbox 容器。
- flex-direction: row | column;: 定义主轴方向，row 为水平方向，column 为垂直方向。
- justify-content: center | space-between | space-around;: 定义元素在主轴上的对齐方式。
- align-items: center | flex-start | flex-end;: 定义元素在交叉轴上的对齐方式。
- flex: <grow> <shrink> <basis>;: 设置元素的伸缩性，控制元素如何分配剩余空间。
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: row; /* 默认水平排列 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.box {
flex: 1; /* 每个 box 占据相同比例的空间 */
}实现左右分栏布局
为了实现左右分栏的响应式布局，可以使用以下 CSS 代码：
.container {
display: flex;
}
.col-left {
width: 50%;
background: #efefef;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
}
.col-right {
width: 50%;
}
.col-right img {
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* 媒体查询，在小屏幕上改变布局 */
@media (max-width: 800px) {
.container {
flex-direction: column; /* 垂直排列 */
}
.col-left,
.col-right {
width: 100%; /* 占据整个宽度 */
}
}代码解释：
- .container: 设置为 Flexbox 容器，默认水平排列。
- .col-left 和 .col-right: 默认宽度为 50%，占据一半的屏幕。
- .col-right img: width: 100% 保证图片宽度自适应容器，height: auto 保持图片比例，background-size: cover 确保图片完全覆盖容器，并可能裁剪部分内容。
- @media (max-width: 800px): 当屏幕宽度小于 800px 时，应用以下样式。
- flex-direction: column: 将 Flexbox 容器的排列方向改为垂直方向，使左右两栏上下排列。
- width: 100%: 使左右两栏占据整个屏幕宽度。
HTML 结构：
<div class="container">
<div class="col-left">
<!-- 左侧内容 -->
<div class="main">
<label class="title">左侧标题</label>
</div>
<div class="content">
<div class="text">
<label class="title">左侧内容文本</label>
</div>
</div>
</div>
<div class="col-right">
<img src="image.jpg" alt="示例图片" />
</div>
</div>解决图片响应式问题
上述代码中，.col-right img 的样式已经实现了基本的图片响应式。关键在于 width: 100% 和 height: auto 的配合使用。background-size: cover 确保图片始终填充容器，但可能会裁剪图片。如果需要完整显示图片，可以使用 background-size: contain，但可能会在容器中留下空白。
避免重复的类名：
在提供的代码中，.title 类名在不同的元素中重复使用。虽然这在技术上可行，但可能会导致样式冲突和难以维护。建议使用更具针对性的类名，例如 .main-title 和 .content-title。
媒体查询的精简
原始代码中存在大量重复的媒体查询，这些查询仅仅是为了调整标题的字体大小。可以合并这些查询，使用一个范围更广的媒体查询来统一处理。
例如，可以将以下代码：
@media only screen and (min-width: 638px) and (max-width: 1334px) {
.title{
font-size:33px;
}
}
@media only screen and (min-width: 638px) and (max-width: 1251px) {
.title{
font-size:32px;
}
}
/* ...更多类似的媒体查询... */替换为：
@media (min-width: 638px) and (max-width: 1334px) {
.title {
font-size: 33px; /* 可以根据需要调整字体大小 */
}
}或者，可以使用 clamp() 函数来实现更平滑的字体大小调整：
.title {
font-size: clamp(1rem, 5vw, 2rem); /* 最小值 1rem，最大值 2rem，中间值根据视口宽度动态调整 */
}注意事项和总结
- 避免过度使用媒体查询： 尽量使用 Flexbox 或 Grid 布局的特性来实现响应式，减少媒体查询的使用。
- 图片优化： 使用适当的图片格式（如 WebP）和压缩技术来减小图片大小，提高页面加载速度。
- 测试： 在不同的设备和浏览器上测试你的布局，确保其在各种环境下都能正常工作。
- 语义化 HTML： 使用语义化的 HTML 标签，例如 <article>、<aside>、<nav> 等，提高代码的可读性和可维护性。
通过本文的学习，你已经掌握了使用 CSS 实现响应式文本和图像布局的基本方法。灵活运用 Flexbox 布局模型和媒体查询，可以创建出适应各种屏幕尺寸的精美网页。记住，实践是最好的老师，多尝试、多学习，你就能成为一名优秀的 Web 开发者。
