为何在<picture>的<source>标签中指定media="(min-width: 0px)"?
为啥苹果网站的最后一个 要加media="(min-width: 0px)"?
- 兜底逻辑更明确:虽然浏览器会按顺序匹配
,但写死 media="(min-width: 0px)"相当于给这个源划了个“所有屏幕尺寸都适配”的范围,要是前面的media条件因为浏览器解析问题没匹配上,这个源能立刻顶上,不会直接跳到的低清图。
- 代码风格统一:苹果团队大概率是想让所有
都带media属性,这样代码看着规整,后续改代码的时候一眼就能知道每个源对应的尺寸范围,不会出现有的带条件有的不带的混乱情况。 - 兼容旧浏览器:有些老版本浏览器对
的支持不够完善,显式加这个条件能强制触发该源的匹配逻辑,确保2x高清图在各种基础设备上都能正常加载,不用赌浏览器的默认 fallback 行为。 - 消除匹配歧义:如果前面的
是按 min-width从大到小排的,最后一个min-width:0px能明确它管的是“所有比前面最小尺寸还小的屏幕”,避免浏览器在匹配时出现模棱两可的判断。
内容的提问来源于stack exchange,提问作者Yuri
相关产品推荐
相关产品推荐

