響應(yīng)式設(shè)計是一種方法，使網(wǎng)站可以在任何尺寸的屏幕上輕松瀏覽和使用
起初吵护，我還以為響應(yīng)式就是采用百分比設(shè)置寬高远剩，讓頁面能適應(yīng)于各種尺寸的屏幕，而如今才知道宏悦，采用百分百只是自適應(yīng)設(shè)計而已通今，響應(yīng)式可沒這么簡單
什么是響應(yīng)式設(shè)計
所謂響應(yīng)式設(shè)計粥谬，就是網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式，
最終的結(jié)果既為：每個設(shè)備都得到了正確的設(shè)計
媒體查詢 @media
CSS的@media規(guī)則允許我們根據(jù)設(shè)備的特性而設(shè)計不同的CSS樣式辫塌，
但如果想利用好這個規(guī)則漏策，我們還必須先讓網(wǎng)頁擁有良好的靈活性，
簡單的說臼氨，就是不再用像素px做為布局單位掺喻，改用百分比
內(nèi)容策略
- 內(nèi)容很重要
在創(chuàng)建一個網(wǎng)站之前，應(yīng)該先從大局著眼储矩。
網(wǎng)站應(yīng)該實現(xiàn)什么樣的目標(biāo)感耙？用戶訪問網(wǎng)站時，我們希望他們做什么持隧？
什么是成功的交互即硼？如何滿足用戶 的需求？ - 僅使用你需要的
不論是網(wǎng)站中的內(nèi)容還是動畫特效屡拨，都首先以需求為中心只酥，不要做本可以或根本不需要做的事情 - 內(nèi)容平等
每個人都應(yīng)該能訪問到網(wǎng)站中重要/所有的內(nèi)容，不論他們用的是什么設(shè)備 -
自適應(yīng)內(nèi)容
展示的內(nèi)容不必所有設(shè)備都一樣呀狼，在需求范圍內(nèi)裂允，可以減少的就可以減掉
響應(yīng)式網(wǎng)站之HTML
創(chuàng)建一個響應(yīng)式網(wǎng)站，我們要用到HTML和CSS哥艇，偶爾也會用一點JavaScript
一般來說绝编，對于響應(yīng)式站點，應(yīng)設(shè)置視口如下：
<meta name="viewport" content="width=device-width ,initial-scale=1">
- name="viewport" 移動設(shè)備瀏覽器的可視區(qū)域
- width=device-width 寬度設(shè)置為移動設(shè)備可視區(qū)域的物理寬度
- initial-scale 告訴瀏覽器首次加載網(wǎng)頁時候貌踏，如何縮放
- user-scalable=no 關(guān)閉用戶縮放能力
- maxmum-scale=1 設(shè)置頁面的最大縮放尺寸
響應(yīng)式網(wǎng)站之CSS
再次回到媒體查詢
創(chuàng)建媒體查詢@media規(guī)則
/*** 當(dāng)訪問設(shè)備是有屏幕的設(shè)備,且視口寬度不小于800px ***/
@media only screen and (max-width:800px){
body { background-color: green; }
}
- only 主要是讓舊的瀏覽器忽略掉整個查詢
-
screen 聲明該查詢應(yīng)用于什么類型的設(shè)備上
對應(yīng)的還有print（打印機）,braille（盲文）,all（全部） - and screen是第一個表達(dá)式十饥， (max-width:800px)是第二個表達(dá)式，只有這兩個表達(dá)式都為真時才生效祖乳，因此需要and關(guān)鍵字進(jìn)行邏輯與判斷
到此逗堵，響應(yīng)式設(shè)計的初始部分就介紹完畢了，涉及的內(nèi)容很少凡资，所以還需繼續(xù)往后學(xué)習(xí)
響應(yīng)式圖片
一砸捏、srcset（分辨率切換）
srcset屬性被添加在<img>元素上的。srcset的值是一個用逗號分隔的列表隙赁。列表中的每個項包含一張圖片的路徑和一個‘w’寬度描述符提供多張分辨率的圖片垦藏。
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
sizes屬性包含一個逗號分隔的列表，這個逗號分隔列表描述了根據(jù)視口而變化的圖片尺寸伞访。
二掂骏、picture（藝術(shù)指導(dǎo)切換）
<picture>元素包含一系列<source>子元素后跟著需要的<img>元素。source元素原理和video元素的子源類似厚掷。
<picture>
<source media="(min-width: 900px)" srcset="cat-vertical.jpg">
<source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
</picture>
每個源必須有一個 srcset屬性弟灼，可選屬性包括 media级解，sizes和 type。<source>元素上的 sizes和 srcset的使用和<img>上完全一樣
media屬性
- media屬性是指令田绑，而不是建議
- media屬性的值是媒體查詢勤哗。
與sizes屬性的媒體情況不同，這里的媒體查詢是你熟知并喜愛的且功能完整掩驱。 - 當(dāng)瀏覽器檢查source元素列表時芒划，使用第一個媒體查詢匹配的源。如果沒有媒體查詢匹配欧穴，則使用<img>元素民逼。
三、srcset+picture
如果既要基于視口寬度的媒體查詢涮帘，又要使用具有不同分辨率版本的圖像拼苍，可以結(jié)合使用<picture>元素和srcset屬性
<picture>
<source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
