本文旨在解决使用 CSS 创建响应式文本和图像布局时遇到的常见问题。我们将探讨如何利用 Flexbox 实现左右分栏布局，并确保图像在不同屏幕尺寸下都能保持适当的比例和显示效果。通过优化 CSS 代码和减少不必要的媒体查询，我们可以创建一个简洁、高效且易于维护的响应式布局。
使用 Flexbox 创建响应式布局
Flexbox 是一种强大的 CSS 布局模块，可以轻松创建灵活且响应式的布局。以下是如何使用 Flexbox 创建左右分栏布局，其中包含文本和图像，并且在不同屏幕尺寸下都能良好地适应：
HTML 结构
首先，我们需要一个包含左右两个分栏的容器。每个分栏包含文本内容和图像。
@@##@@
CSS 样式
接下来，我们使用 CSS 来定义容器和分栏的样式，并确保图像的响应性。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.box {
position: relative;
box-sizing: border-box;
margin-bottom: 0;
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
}
.col-left {
background: black;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
width: 50%;
}
.col-right {
width: 50%;
height: auto;
}
.col-right img {
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
label {
display: inline-block;
max-width: 100%;
}
.container .main:after {
clear: both;
display: block;
content: '';
}
.main {
text-align: center;
height: 120px;
}
.text {
text-align: center;
height: 213px;
}
.title {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.005em;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 5px;
}
.author {
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 33px;
color: #FFFFFF;
margin-top: 48px;
}
@media (max-width: 800px) {
.container {
flex-direction: column;
text-align: center;
align-items: center;
}
.col-left {
width: 100%; /* 调整左侧栏宽度 */
}
.col-right {
width: 100%; /* 调整右侧栏宽度 */
}
}关键点：
- display: flex;: 使 .container 成为一个 Flexbox 容器。
- width: 50%;: 设置左右分栏的宽度为 50%，使其平分容器空间。
- width: 100%; height: auto;: 确保图像宽度始终为 100%，高度自动调整，以保持纵横比。
- background-size: cover;: 使图像覆盖整个容器，并保持纵横比。
- flex-direction: column;: 在小屏幕上，将 Flexbox 布局更改为垂直排列。
- @media (max-width: 800px): 使用媒体查询，在屏幕宽度小于 800px 时应用不同的样式。
注意事项
- 避免重复的类名: 尽量避免在不同的元素中使用相同的类名，这可能会导致样式冲突。
- 精简媒体查询: 尽量使用更少的媒体查询，并使用更通用的样式规则，以提高代码的可维护性。
- box-sizing: border-box;: 确保所有元素都使用 border-box 模型，以便更好地控制元素的尺寸。
总结
通过使用 Flexbox 和媒体查询，我们可以轻松创建响应式的文本和图像布局。关键在于理解 Flexbox 的工作原理，并根据不同的屏幕尺寸调整布局。通过遵循最佳实践，我们可以创建简洁、高效且易于维护的响应式网站。
这个教程提供了一个基本的框架，你可以根据自己的需求进行修改和扩展。记住，响应式设计是一个持续学习和实践的过程。
