本文介绍如何使用CSS媒体查询，针对不同设备屏幕尺寸（尤其是手机端）动态切换背景图片的background-size属性值，实现从cover到contain的响应式适配。
本文介绍如何使用css媒体查询，针对不同设备屏幕尺寸（尤其是手机端）动态切换背景图片的`background-size`属性值，实现从`cover`到`contain`的响应式适配。
在构建响应式网页时，背景图片的渲染效果常因设备视口差异而失真：background-size: cover 能确保图片完全填充容器，但可能裁剪关键内容；而 contain 则完整显示整张图片，适合小屏下保留信息完整性。为兼顾大屏视觉冲击与小屏可读性，推荐将内联样式迁移至外部CSS类，并结合媒体查询实现精准控制。
首先，定义基础样式类（避免内联样式带来的维护难题）：
.block-img {
background-image: url('images/hbc/slider-3.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
接着，添加移动端适配规则——当视口宽度 ≤ 768px（典型平板/手机断点）时，覆盖 background-size 值：
@media (max-width: 768px) {
.block-img {
background-size: contain;
}
}
⚠️ 注意事项：
- 断点选择需匹配实际设计需求：768px 是通用阈值，若项目采用移动优先策略，建议改用 @media (max-width: 480px) 或基于设计稿的精确值；
-
确保HTML元素正确应用类名：
<div class="block-img" style="height: 400px;"></div>
（注意：容器需有明确宽高，否则背景图可能不可见）；
- 兼容性无忧：@media 查询与 background-size 均被所有现代浏览器及 IE9+ 支持；
- 进阶提示：如需更精细控制（如仅在竖屏手机生效），可组合使用 orientation: portrait 或 min-resolution 等媒体特性。
通过该方案，你无需JavaScript即可实现轻量、高性能的响应式背景图行为切换，既符合Web标准，又显著提升多端用户体验。
