响应式图片选择异常：1535px宽度错误加载大图问题排查

核心原因 #

出现1535px临界点的异常，本质是浏览器媒体查询的浮点精度问题：

• 在高DPI屏幕（比如2倍/3倍Retina屏）下，CSS像素和物理像素会进行转换，当视口宽度刚好卡在1535px这个整数CSS像素时，浏览器内部的浮点计算可能出现微小偏差（比如实际计算值为1535.0001px），导致(max-width: 1535px)的媒体查询未被命中。
• 此时第二个(min-width: 1536px)的媒体查询也不满足，浏览器就会 fallback 到<img>标签的默认src（也就是大图），从而出现错误。

解决方法 #

你可以通过以下两种方式修复：

• 调整媒体查询精度：给小图的媒体查询添加微小的容错区间，改成(max-width: 1535.999px)，避免浮点偏差导致的匹配失败：

<picture>
    <source srcset="img/small.png" media="(max-width: 1535.999px)"/>
    <source srcset="img/large.png" media="(min-width: 1536px)"/>
    <img src="img/large.png"/>
</picture>

• 简化匹配逻辑：去掉第二个<source>的媒体查询，利用<picture>从上到下匹配的特性，只要不满足第一个source的条件，就自动加载大图，减少临界点判断的风险：

<picture>
    <source srcset="img/small.png" media="(max-width: 1535px)"/>
    <img src="img/large.png"/>
</picture>

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