HTML5学习系列之响应式图像

HTML5学习系列之响应式图像


前言

学习记录


响应式图像

响应视图大小

容器

  • srcset:图片地址,必需有。
  • media:设置媒体查询。
  • sizes:设置宽度。
  • type:设置MIME类型。
  • 尝试使用兼容picture。

响应屏幕方向

在picture中的source中通过设置media、orientation、srcset。

响应像素密度

  • 在picture中的source中的最后".png" 后加2x。
  • 如果是1x,直接可不用加后缀名。

响应图像格式

支持加载webp就加载该格式,如果不支持就不加载。

自适应像素比

srcset中包含的元素比较多。

自适应视图宽

html 复制代码
<img width="500" srcset="
	images/2000.png 2000w,
	images/1500.png 1500w"
	sizes="
	(max-width:500px) 500px,
	(max-width:1000px) 1000px"
	src="images/500.png"
	/>

总结

学习记录。

相关推荐
2303_Alpha6 小时前
SpringBoot
笔记·学习
萘柰奈6 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽6 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫7 小时前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie7 小时前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿7 小时前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng7 小时前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed15 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中15 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h16 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa