前端学习笔记04---关于srcset在chorme里的奇特表现
1、video元素可以通过src属性加载视频，里面可以放内容，在浏览器不支持video元素时会显示该内容。因为各个浏览器存在支持不同视频格式的缘故，所以一般用source来加载视频，保证各个浏览器能有其对应的可播放是视频格式。用source标签浏览器只会匹配第一个浏览器兼容的视频。
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
2、对于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的浏览器，您可以从src属性引用PNG或JPG，并使用srcset属性 只有最近的浏览器才能识别）来引用SVG。
响应式图片的应用：
以前的理解：
就是之前那个老师教的那样吧，用@media(XXX)来控制图片的样式大小，是通过css的@规则来控制的，这很显然是可以的，但不管是那种情况下一直用的都是同一张图片，可能会造成小图片被拉大时模糊的情况。
现在的理解：
html里面的img本来就提供一个属性srcset来控制大小的情况，srcset是包含多个不同尺寸的图片，再通过size属性的媒体查询控制应该选用那张合适的照片，这很合理啊。
之前老师为什么这教，我感觉是因为在bootstrap框架里面才这么教吧，因为在这框架里主要使用它的css和js，用css也很合理，如果不是bootstrap框架的网页还是用srcset吧。
关于srcset在chorme里的奇特表现
特别注意： google chorme的srcset真的有点太过“聪明”了，真的被它搞死了。试了好几个小时终于试搞明白了chorme里面的srcset的怎么用了。
（我的例子：
<img srcset="firefox_logo-only_RGB.png 480w,
mozilla-dinosaur-head.png 800w"
sizes="(max-width:600px) 500px,
(max-width:600px) 800px"
src="firefox_logo-only_RGB.png " alt="">
<picture>
<source media="(max-width:600px)" srcset="firefox_logo-only_RGB.png">
<source media="(max-width:1200px)" srcset="mozilla-dinosaur-head.png">
<img src="mozilla-dinosaur-head.png" alt="">
</picture>
两种图片是不同尺寸和不同的图片）
1、首先要搞清楚img里面的srcset和picture里面用source的srcset两种方法的用处先，img里面的是对应相同图片的不同尺寸，而picture里面的试可以对应不同图片的。这个理论也是符合html原来设计srcset的观点的。
2、其次要搞明白img里面的srcset和picture里面用source的srcset两种方法对于媒体查询时检查的是哪个一宽度。很显然我们想要的就是浏览器的宽度吧。
3、再者来说下chorme里面关于检查这个宽度的正确理解，在开发者工具里面的那个响应式改变宽度是不能改变浏览器的宽度的（我也不知道为啥），只有当你用鼠标缩小浏览器到一定宽度才代表浏览器的宽度变化了。而在firefox里面的响应式就不是这样，它的响应式就代表了浏览器的宽度，所以一开始我验证srcset的时候才会表现出在chorme里面的不可以用，在firefox里面可以用的效果。
4、在搞清楚这个之后，我就试着改变chorme的浏览器宽度，发现img的srcset是变化了尺寸，但是图片没变化；picture里面用source的srcset则图片和尺寸都变化了。这就很神奇了，在img里面的图片竟然还能保持原图片还帮我改了尺寸，我就是我说chorme“聪明”的点，可以说它是更严格的遵守srcset的设计规则吧，你要改变图片就用picture那种形式嘛，不要用img这种，chorme大概想要传达的是这种信息吧。其次在firefox里面就不管你那么多了，不管图片相不相同，达到条件就是换。
5、最后还有一个问题就是img里面我选的是两张不同的图片，为什么他就一定选中了下面那张呢？这个问题没测试出来，不过从一些论坛上看别人说的好像是他会找一开始你浏览器宽度也合适的那张，这真没测出来，所以不是很相信。
