响应式图片
Posted Mr_W
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式图片相关的知识，希望对你有一定的参考价值。
<picture>元素与<source>元素
例如需要分别在小于640px 大于640px 小于960px 和 大于960px的3个区域内使用small.jpg medium.jpg large.jpg可以这么编码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>响应式图片</title> 8 </head> 9 <body> 10 <picture> 11 <source media="(max-width:640px)" srcset="[email protected] 2x, small.jpg 1x"/> 12 <source media="(max-width:960px)" srcset="[email protected] 2x, medium.jpg 1x"/> 13 <source srcset="[email protected] 2x, large.jpg 1x"/> 14 <img src="small.jpg" alt=""> 15 </picture> 16 </body> 17 </html>
分析
max-width:640px 表示页面不足640px
[email protected] 2x, small.jpg 1x 告诉浏览器该来源为同一素材提供了两种清晰度的版本以上是关于响应式图片的主要内容，如果未能解决你的问题，请参考以下文章
html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段