网页中 picture 标签内 source 元素的 media 属性如何根据屏幕方向筛选图片
浏览器会根据 media 属性指定的媒体条件判断是否加载对应的 source 元素，条件不满足则跳过并尝试下一个。
media 属性的筛选逻辑
source 元素的 media 属性用于指定媒体条件，类似于媒体查询。浏览器在解析 picture 标签时，会依次评估每个 source 元素的 media 条件。如果当前 source 的条件评估为假，浏览器将跳过该元素并继续检查下一个 source。只有当条件评估为真时，该 source 元素才会被选中。
这种机制允许网页根据不同的显示场景提供不同的图片资源。例如，可以针对竖屏和横屏分别加载不同的图片，以适应不同的浏览体验。media 属性确保了图片资源的精准匹配，避免了因场景不符而加载不合适的图片。需要注意的是，media 属性仅影响图片的选择，不影响图片的尺寸或分辨率。
结合 orientation 条件的应用
orientation 是 media 属性中常用的条件之一，用于判断设备的屏幕方向。例如，使用 media 属性值为 (orientation: portrait) 可以指定仅在竖屏模式下加载的图片。浏览器会根据当前设备的屏幕方向动态选择最合适的图片资源，从而提升用户体验。
这种技术特别适用于响应式设计，能够根据用户的浏览习惯自动调整图片展示。例如，在手机竖屏浏览时加载更宽的图片，而在平板横屏浏览时加载更窄的图片。orientation 条件的使用需要与 srcset 属性配合，以确保图片的加载效率和显示效果。
复现检查步骤与结果判断
要验证 media 属性是否生效，可以在网页中编写一个包含多个 source 元素的 picture 标签。每个 source 元素设置不同的 media 属性和 srcset 属性，img 标签设置一个通用的回退图片。使用浏览器开发者工具的“网络”面板，查看实际加载的图片文件名。如果浏览器支持某种 media 条件，则只会加载对应 media 属性的图片；如果不支持，则跳过该 source 并加载下一个支持的图片，最终加载 img 标签的回退图片。
如果检查后发现所有 source 元素都被跳过，且只加载了 img 标签的图片，说明浏览器不支持所有 source 元素的 media 属性指定的条件。此时可以尝试修改 media 属性为浏览器支持的常见条件，如 (orientation: portrait) 或 (width >= 600px)，以确认问题所在。通过这种方式，可以快速定位 media 属性是否正确配置以及浏览器是否支持相应的条件。
注意事项与常见问题
media 属性的值必须与浏览器支持的媒体查询语法完全一致，否则浏览器可能无法识别。例如，orientation 条件必须使用冒号分隔，且值必须是小写的 portrait 或 landscape。如果 media 属性值错误，浏览器将跳过该 source 元素，可能导致加载了不合适的图片或回退图片。此外，media 属性仅影响图片的选择，不会改变图片的尺寸或显示方式，这些仍需通过 srcset 和 sizes 属性控制。
在使用 media 属性时，应确保 img 标签的 src 属性指向一个兼容性良好的回退图片。如果所有 source 元素都被跳过，浏览器将显示回退图片，因此回退图片的格式应尽量通用。同时，避免在同一个 picture 标签中重复使用相同的 media 条件，这可能导致浏览器选择不确定。正确配置 media 属性可以显著提升图片加载的兼容性和性能。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。