搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
HTML参考手册
HTML 属性
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML source media 属性使用-基础教程(div.cn)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> <p>调整浏览器大小,以查看在不同视口大小下加载的图片的不同版本。浏览器将查找媒体查询与用户当前视口宽度匹配的第一个source元素,并获取srcset属性中指定的图像。</p> <p>img元素是图片声明块的最后一个子标签。img元素用于为不支持picture元素的浏览器或没有匹配的源标签提供向后兼容性。 </p> </body> </html>
运行结果