响应式Web设计

时间 2019-11-15

标签响应 web 设计栏目 HTML 繁體版

原文原文链接

1、@media媒体查询css

温故而知新，回顾下本身对@media媒体查询的理解吧。html

媒体查询至关因而一个条件，只有知足了这个条件才会执行媒体查询内的样式表。web

媒体查询的语法spa

@media screen and (min-width:300px){ }

该语句描述了当使用的设备类型为屏幕时，屏幕的最小宽度大于等于300px时，将应用该媒体查询内的样式表。code

媒体查询的条件能够更加详细：@media screen and (min-width:300px) and (max-width:600px) and (orientation:portrait) { }htm

该语句描述了当使用的设备类型为屏幕时，屏幕的最小宽度大于等于300px至小于等于600px，且屏幕的可见区域高度大于等于宽度。blog

媒体查询写在css中three

例子：当视口宽度大于等于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-width: 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-width: 600px){
31     .link::before{
32         display: inline;
33     }
34 }

这样的写法虽然多写了一遍媒体查询，可是相比把媒体查询都写在一块儿的写法，要更具备可维护性。utf-8

除了将媒体查询写在css样式表中，还能够在<head>中写媒体查询：

<link href=" " rel="stylesheet" media="screen and (min-width:300px)">

2、响应式图片

<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-width:300px) 50vw, (max-width:480px) 80vw, (max-width:800px) 10vw">

<picture>元素

1 <picture>
2      <source media="(min-width: 300px)" srcset="s-300.jpg">
3      <source media="(min-width: 480px)" srcset="m-480.jpg">
4      <source media="(min-width: 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