響應式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>