响应式设计技术选型困惑：srcset、picture、媒体查询、Bootstrap该何时使用？

1. <srcset> + <img>：仅处理分辨率适配 #

• 核心：针对「同一构图，不同清晰度」的场景，浏览器会根据设备像素比自动选择对应分辨率的图片，不用手动写判断逻辑。
• 适用场景：商品详情主图、用户头像这类，不管屏幕大小，显示的内容完全一致，只需要随设备DPI调整清晰度。
• 代码示例：

<img src="image-1x.jpg" 
     srcset="image-2x.jpg 2x, image-3x.jpg 3x"
     alt="商品主图">

2. <picture> + <source>：处理艺术指导需求 #

• 核心：当不同屏幕尺寸需要展示图片的不同部分时使用，比如桌面端显示全景图，移动端只保留核心主体（人物/Logo），需要给不同断点指定完全不同的图片。
• 适用场景：首页横幅、英雄区Banner这类需要根据设备调整图片构图的场景。
• 代码示例：

<picture>
  <source media="(max-width: 600px)" srcset="mobile-banner.jpg">
  <source media="(min-width: 601px)" srcset="desktop-banner.jpg">
  <img src="desktop-banner.jpg" alt="首页横幅">
</picture>

3. CSS媒体查询：全局布局与样式的响应式控制 #

• 核心：用来控制整个页面的布局变化、元素样式调整，比如导航栏在移动端切换为汉堡菜单，桌面端显示完整导航；或是调整字体大小、元素间距、显示/隐藏特定模块。
• 和响应式图片的区别：图片标签是让浏览器提前加载合适的资源（减少带宽浪费），媒体查询是控制页面元素的呈现逻辑。
• 代码示例：

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}

4. Bootstrap：快速搭建通用响应式页面 #

• 核心：封装好的响应式工具集，自带预定义的网格系统、UI组件（导航、卡片、按钮）和辅助类，不用从零手写媒体查询和基础样式。
• 适用场景：原型开发、中小型项目、需要统一设计规范的页面，适合快速落地响应式需求。
• 代码示例：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">内容模块1</div>
    <div class="col-12 col-md-4">内容模块2</div>
    <div class="col-12 col-md-4">内容模块3</div>
  </div>
</div>

快速选型指南 #

• 仅需调整图片清晰度 → 用<srcset>
• 需要根据屏幕修改图片构图 → 用<picture>
• 要调整页面布局、元素样式 → 用CSS媒体查询
• 快速开发通用响应式页面，不想重复造轮子 → 用Bootstrap

内容的提问来源于stack exchange，提问作者Logesh