一、概念
響應(yīng)式設(shè)計（RWD，Responsive Web Design）是頁面布局可以「響應(yīng)」不同尺寸屏幕的設(shè)計方法斜筐。通常我們說起響應(yīng)式設(shè)計都是針對網(wǎng)頁設(shè)計的。同一個頁面蛀缝，隨著屏幕尺寸的改變顷链，自適應(yīng)地改變頁面布局。
二内斯、設(shè)計方法
設(shè)計師：將網(wǎng)頁中的元素分模塊設(shè)計蕴潦，針對不同的屏幕，調(diào)整出不同的布局》常現(xiàn)在流行一種「移動優(yōu)先」的策略潭苞，也就是說先行設(shè)計移動端的樣式，然后再擴(kuò)展成為PC端樣式真朗，因?yàn)橐苿佣说臉邮较鄬唵未苏睿瑵u進(jìn)增強(qiáng)為PC端樣式，更為平滑遮婶。
前端工程師：將設(shè)計獅設(shè)計的不同布局蝗碎，寫成CSS文件，適配到不同的分辨率下旗扑。同時蹦骑，他還要使用資源查詢（Media Queries）根據(jù)不同的分辨率，拉取不同尺寸的資源臀防，以加快頁面的加載速度眠菇，并且減少流量的消耗。
三袱衷、響應(yīng)式界面的四個層次
1捎废、同一頁面在不同大小和比例上看起來都應(yīng)該是舒適的；
2致燥、同一頁面在不同分辨率上看起來都應(yīng)該是合理的登疗；
4、同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下嫌蚤，體驗(yàn)應(yīng)該是統(tǒng)一的辐益；
5、同一頁面在不同類型的設(shè)備（手機(jī)搬葬、平板荷腊、電腦）上，交互方式應(yīng)該是符合習(xí)慣的急凰。
四女仰、響應(yīng)式設(shè)計的要點(diǎn)
1、可伸縮的內(nèi)容區(qū)塊抡锈，內(nèi)容區(qū)塊的在一定程度上能夠自動調(diào)整疾忍，以確保填滿整個頁面。
2床三、可自由排布的內(nèi)容區(qū)塊一罩，當(dāng)頁面尺寸變動較大時，能夠減少/增加排布的列數(shù)撇簿。
3聂渊、適應(yīng)頁面尺寸的邊距差购。
4、能夠適應(yīng)比例變化的圖片汉嗽，對于常見的寬度調(diào)整欲逃，圖片在隱去兩側(cè)部分時，依舊保持美觀可用饼暑。
5稳析、能夠自動隱藏/部分顯示的內(nèi)容，如在電腦上顯示的的大段描述文本弓叛，在手機(jī)上就只能少量顯示或全部隱藏彰居。
6、能自動折疊的導(dǎo)航和菜單撰筷，展開還是收起陈惰，應(yīng)該根據(jù)頁面尺寸來判斷。
7闭专、放棄使用像素作為尺寸單位奴潘，用dp尺寸等方法來確保頁面在分辨率相差很大的設(shè)備上，看起來也能保持一致影钉。同時也要求提供的圖片應(yīng)該比預(yù)想的更大画髓，才能適應(yīng)高分辨率的屏幕。
——部分內(nèi)容整理自網(wǎng)絡(luò)——
