在 <picture> 中用 media="(min-width: 768px) and (max-width: 1024px)" 匹配常见平板宽度区间，需配合 <img> 兜底、srcset 支持高倍屏，并注意 DevTools 中启用对应 DPR 模拟。
picture 标签里怎么写 media 属性才匹配平板
picture 本身不直接识别“平板”这个设备类型，浏览器没内置 is-tablet 这种媒体查询。得靠 media 属性配合 CSS 媒体查询来逼近常见平板的视口范围。
常见平板（如 iPad、Surface）的典型宽度在 768px 到 1024px 之间，但要注意：
- 竖屏 iPad 是 768px 宽，横屏是 1024px
- 很多安卓平板竖屏也落在 800px 左右
- 避免用
(min-width: 768px) and (max-width: 1024px)这种硬切，它会误伤部分横屏手机或小尺寸笔记本
更稳妥的做法是用 (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) 匹配竖屏平板，再单独加一条横屏规则，或者干脆只按宽度 + 设备像素比粗筛：
<picture> <source media="(min-width: 768px) and (max-width: 1024px)" srcset="img/tablet-home.jpg"> <source srcset="img/mobile-home.jpg"> <img src="img/mobile-home.jpg" alt="首页图"> </picture>
注意：source 的顺序很重要——浏览器从上到下匹配第一条满足条件的，所以宽屏规则要放在窄屏之前，否则会被跳过。
为什么 img 标签不能省，哪怕写了所有 source
picture 是容器，真正渲染的是内部的 img。即使你写了 5 个 source，只要没 img，页面就啥也不显示，控制台也不会报错，只会留出空白占位。
立即学习“前端免费学习笔记（深入）”；
这和 video 或 audio 不同，它们可以靠 source 自主播放，但 picture 必须依赖子元素 img 来触发加载和渲染。
所以必须保留：
-
img元素（不可省略） -
src属性（作为兜底，当所有source都不匹配时使用） -
alt属性（可访问性刚需）
srcset 和 sizes 怎么配合 media 实现更高精度适配
单纯靠 media 只能做“宽度区间切换”，但平板有 Retina 屏（如 iPad Pro 的 2x），这时候光给一张 1024px 宽图不够——需要更高分辨率资源。
用 srcset + sizes 能让浏览器根据设备像素比和视口宽度自动选图，比纯 media 更精细：
<picture>
<source
media="(min-width: 768px) and (max-width: 1024px)"
srcset="img/tablet-1x.jpg, img/tablet-2x.jpg 2x"
sizes="(max-width: 1024px) 100vw, 800px"
>
<img src="img/mobile-1x.jpg" srcset="img/mobile-1x.jpg, img/mobile-2x.jpg 2x" alt="示意图">
</picture>关键点：
-
srcset里的2x告诉浏览器这张图是双倍密度，适用于window.devicePixelRatio >= 2的设备 -
sizes描述“这张图在不同断点下大概占多宽”，帮助浏览器预估所需像素宽度 - 平板上若
devicePixelRatio是 2，且视口宽度是 768px，浏览器会优先选tablet-2x.jpg（需宽约 1536px）
Chrome DevTools 模拟平板时图片不切换？检查这三点
这是最常卡住人的地方，不是代码写错了，而是调试环境没对：
- 检查响应式模式是否启用了 “Device Pixel Ratio”：DevTools → ⋯ → Rendering → Emulate DPR，设为 2（iPad）或 1.5（部分安卓平板），否则
2x图片永远不会被选中 - 确保没开启 “Disable cache”，否则浏览器可能复用之前加载的
img[src]，跳过source匹配逻辑 - 在 Elements 面板里右键
img→ “Reload frame” 或刷新整个页面，因为picture的资源选择只在首次加载时计算，缩放窗口不会重新触发
真正上线后，用户设备的 DPR 和视口是确定的，但本地调试时容易忽略这些模拟开关。
