一、@media**查詢
溫故而知新，回顧下自己對@media**查詢的理解吧。
**查詢相當於是乙個條件，只有滿足了這個條件才會執行**查詢內的樣式表。
**查詢的語法
@media screen and (min-width:300px)該語句描述了當使用的裝置型別為螢幕時，螢幕的最小寬度大於等於300px時，將應用該**查詢內的樣式表。
**查詢的條件可以更加詳細：@media screen and (min-width:300px) and (max-width:600px) and (orientation:portrait)
該語句描述了當使用的裝置型別為螢幕時，螢幕的最小寬度大於等於300px至小於等於600px，且螢幕的可見區域高度大於等於寬度。
**查詢寫在css中
1doctype 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"
>
8head
>
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>
13body
>
14html
>
1這樣的寫法雖然多寫了一遍**查詢，但是相比把**查詢都寫在一起的寫法，要更具有可維護性。.link78
@media screen and (min-width: 600px)12}
1314
.link::before
1718
.icon-one::before
2122
.icon-two::before
2526
.icon-three::before
2930
@media screen and (min-width: 600px)
34}
除了將**查詢寫在css樣式表中，還可以在中寫**查詢：
二、響應式元素的響應式有兩個關鍵屬性，第乙個是srcset屬性，代表著提供不同解析度大小的給遊覽器備選，如果遊覽器不支援或者無法讀取srcset屬性裡的，那就會選擇預設設定的，其中數值後的w是表示告訴遊覽器這張有多寬。第二個是sizes屬性，代表在視口滿足條件時，選擇在該視口下的大小。
元素
標籤是容器，在裡面有兩個不同的標籤，第乙個是
，該標籤代表預設的，如果遊覽器不支援標籤，或者支援但是沒有找到合適的**定義，就會選擇這張預設的。
第二個是標籤，在該標籤裡可以使用**查詢表示式，告訴遊覽器在什麼條件下使用什麼，如例子中的第一條，告訴遊覽器「在視口大於等於300px時，使用s-300.jpg這張」。
最後還有一種新的格式webp
響應式web設計
initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...
響應式web設計
響應式網頁設計是時下網頁設計領域最熱門的話題之一，該概念由著名網頁設計師 ethan marcotte 在2010年5月份提出，其目標是要讓設計的 能夠響應使用者的行為，根據不同終端裝置自動調整尺寸。簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。那麼，怎麼實現響應式設計呢？...
響應式Web設計
設計師熟知的在印刷 的控制功能，常常也會期望web 會有，但是他們僅僅限制在列印出來的頁面上才能使用。我們必須接受這樣的事實 web根本沒有同樣的限制和為這樣的彈性準備的設計。但是首先我們必須接受這種落差和流程。英國建築師christopher wren有一次開玩笑說他選擇了乙個 以永恆為目標 的領...