使用 CSS 实现响应式文本与图片布局

作者 2025年8月29日 12

本文旨在帮助开发者解决在使用 css 创建响应式布局时遇到的文本和图片自适应问题。通过分析常见的布局问题和提供优化的代码示例，本文将指导你如何使用 flexbox 和 Media Queries 创建在各种屏幕尺寸下都能良好展示的响应式双栏布局。本文还探讨了优化CSS代码和避免常见错误的方法，以提升网站的用户体验。

响应式布局核心：Flexbox 与 Media Queries

实现响应式布局的关键在于利用 Flexbox 的灵活性和 Media Queries 的条件样式应用能力。Flexbox 能够轻松控制元素的排列方式和对齐方式，而 Media Queries 则允许我们根据屏幕尺寸应用不同的 CSS 规则。

基础布局结构

首先，我们需要一个包含左右两栏的容器。使用 Flexbox 可以轻松实现这个布局。

<div class="container">   <div class="col-left box">     <div class="containers">       <div class="main">         <label class="title">textheretextherertexthere</label>       </div>     </div>     <div class="content">       <div class="text">         <label class="title">textheretextheretextheretextheretextheretexthere</label>       </div>     </div>   </div>   <div class="col-right box">     <img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" />   </div> </div>

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; }

代码解释:

.container: 使用 display: flex 创建 Flexbox 容器。
.col-left 和 .col-right: 设置左右两栏的宽度为 50%。
.col-right img: width: 100% 确保图片宽度始终与容器宽度一致，height: auto 保持图片宽高比。background-size: cover 确保图片填充整个容器，并保持宽高比，可能会裁剪图片。

Media Queries 的应用

当屏幕尺寸较小时，将双栏布局改为单栏布局可以提高可读性。可以使用 Media Queries 来实现这一点。

@media (max-width: 800px) {   .container {     flex-direction: column;     text-align: center;     align-items: center;   }    .col-left,   .col-right {     width: 100%; /* 让左右栏都占据 100% 宽度 */   } }

代码解释:

@media (max-width: 800px): 当屏幕宽度小于 800px 时，应用以下样式。
.container: flex-direction: column 将 Flexbox 容器的主轴方向改为垂直方向，实现单栏布局。
.col-left, .col-right: 设置左右两栏的宽度为 100%，使其占据整个屏幕宽度。

注意事项

避免重复的类名: 在 html 中，避免在不同的元素中使用相同的类名，这可能导致样式冲突。
优化 Media Queries: 避免使用过多的 Media Queries。尽量使用更少的 Media Queries 来实现响应式效果，可以提高代码的可维护性。
box-sizing: border-box: 确保所有元素都设置了 box-sizing: border-box，这样可以更容易地控制元素的尺寸，避免因 padding 和 border 导致元素超出容器。

总结

通过结合 Flexbox 和 Media Queries，可以轻松创建响应式的文本和图片布局。关键在于理解 Flexbox 的工作原理，并根据不同的屏幕尺寸应用合适的 Media Queries。此外，保持代码的简洁性和可维护性也很重要。

Hello! 欢迎来到悠悠畅享网！