响应式Web设计

一、@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