一、@media媒体查询
温故而知新，回顾下自己对@media媒体查询的理解吧。
媒体查询相当于是一个条件，只有满足了这个条件才会执行媒体查询内的样式表。
媒体查询的语法
@media screen and (min-300px){ }
该语句描述了当使用的设备类型为屏幕时，屏幕的最小宽度大于等于300px时，将应用该媒体查询内的样式表。
媒体查询的条件可以更加详细：@media screen and (min-300px) and (max-600px) and (orientation:portrait) { }
该语句描述了当使用的设备类型为屏幕时，屏幕的最小宽度大于等于300px至小于等于600px，且屏幕的可见区域高度大于等于宽度。
媒体查询写在css中
例子：当视口宽度大于等于600px时，为链接前添加小图标
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>demo</title> 6 <link href="demo.css" rel="stylesheet"> 7 <meta name="viewport" content="initial-scale=1.0, width=device-width"> 8 </head> 9 <body> 10 <a href="" class="link icon-one">链接一</a> 11 <a href="" class="link icon-two">链接二</a> 12 <a href="" class="link icon-three">链接三</a> 13 </body> 14 </html>
1 .link{ 2 display: block; 3 color:black; 4 line-height: 1.5em; 5 text-decoration: none; 6 } 7 8 @media screen and (min- 600px){ 9 .link{ 10 padding-left:1em; 11 } 12 } 13 14 .link::before{ 15 display: none; 16 } 17 18 .icon-one::before{ 19 content:"▲" 20 } 21 22 .icon-two::before{ 23 content:"▼" 24 } 25 26 .icon-three::before{ 27 content:"▲" 28 } 29 30 @media screen and (min- 600px){ 31 .link::before{ 32 display: inline; 33 } 34 }
这样的写法虽然多写了一遍媒体查询，但是相比把媒体查询都写在一起的写法，要更具有可维护性。
除了将媒体查询写在css样式表中，还可以在<head>中写媒体查询：
<link href=" " rel="stylesheet" media="screen and (min-300px)">
二、响应式图片
<img>元素的响应式图片有两个关键属性，第一个是srcset属性，代表着提供不同分辨率大小的图片给游览器备选，如果游览器不支持或者无法读取srcset属性里的图片，那就会选择默认设置的图片，其中数值后的w是表示告诉游览器这张图片有多宽。第二个是sizes属性，代表在视口满足条件时，选择图片在该视口下的大小。
1 <img src="img/s-300.jpg" alt="img" 2 srcset="img/s-300.jpg 300w, img/m-480.jpg 480w, img/l-800.jpg 800w" 3 sizes="(max-300px) 50vw, (max-480px) 80vw, (max-800px) 10vw">
<picture>元素
1 <picture> 2 <source media="(min- 300px)" srcset="s-300.jpg"> 3 <source media="(min- 480px)" srcset="m-480.jpg"> 4 <source media="(min- 800px)" srcset="l-800.jpg"> 5 <img src="s-300.jpg" alt="img"> 6 </picture>
<picture>标签是容器，在里面有两个不同的标签，第一个是<img>，该标签代表默认的图片，如果游览器不支持<picture>标签，或者支持<picture>但是没有找到合适的媒体定义，就会选择这张默认的图片。
第二个是<source>标签，在该标签里可以使用媒体查询表达式，告诉游览器在什么条件下使用什么图片，如例子中的第一条，告诉游览器“在视口大于等于300px时，使用s-300.jpg这张图片”。
最后还有一种新的图片格式webp