名詞解釋
- RWD：即Responsive Web Design督勺，譯為響應(yīng)式網(wǎng)頁設(shè)計(jì)，一個(gè)網(wǎng)站可以同時(shí)適配多個(gè)設(shè)備和各種屏幕赏廓，網(wǎng)絡(luò)布局和功能隨之變化格遭。
設(shè)計(jì)師在印刷介質(zhì)中知道的并且通常在網(wǎng)絡(luò)介質(zhì)中需要的控制僅僅是印刷頁面限制的功能。我們應(yīng)該接受這樣的事實(shí)揣苏，即網(wǎng)絡(luò)沒有相同的約束條件悯嗓，并為此設(shè)計(jì)靈活性。但首先卸察，我們必須“接受事物的潮起潮落”脯厨。
—— John Allsopp
前端：即front-end，為網(wǎng)站的前臺(tái)部分坑质，包括基本的HTML合武，CSS临梗，Javascript，SVG等眯杏。
彈性網(wǎng)絡(luò)布局：即fluid grip夜焦，為網(wǎng)絡(luò)布局提供最大的靈活性。
彈性圖片/媒體：即flexible images岂贩，圖片在根據(jù)屏幕大小伸縮的時(shí)候茫经，圖片的比例保持不變砰盐。使用CSS的max-width屬性壤玫，一行簡(jiǎn)單的代碼就可實(shí)現(xiàn)。
img { max-width: 100%;}媒體查詢：即media queries娘香，在不同的條件下使用不同的樣式锉屈，使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果荤傲。
媒體查詢使我們可以在頁面重新塑造時(shí)進(jìn)行一些令人難以置信的精確微調(diào)：
—— Ethan Marcotte
- 斷點(diǎn)：即breakpoint，某個(gè)寬度臨界點(diǎn)颈渊，跨過這個(gè)點(diǎn)遂黍，布局就會(huì)發(fā)生顯著變化。
- 視口：即viewport俊嗽，瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域雾家，并非所顯示的屏幕大小。
為什么要使用RWD
1. 移動(dòng)端的出現(xiàn)
眾所周知绍豁，2007年Apple開啟了手機(jī)上網(wǎng)的先河芯咧，移動(dòng)端的使用和研發(fā)成為了一股浪潮，隨著時(shí)間的推移竹揍，移動(dòng)端以更容易接受敬飒、更方便快捷的方式廣受青睞。而這芬位，不斷上升的數(shù)據(jù)无拗，不斷變化著的占比，標(biāo)志著一個(gè)移動(dòng)時(shí)代的到來晶衷。
2. 超越性的交叉點(diǎn)
2016年10月份中旬蓝纲，從“ 每個(gè)家庭都有一部電腦 ” 延津到了 “ 人手一臺(tái)手機(jī) ” ，得益于技術(shù)的革新晌纫，市面上各類型的手機(jī)多得令人眼花繚亂税迷。而設(shè)備的屏幕大小類型、設(shè)備布局能力也復(fù)雜了起來锹漱。
3. 拋棄傳統(tǒng)的頁面模式
21世紀(jì)是一個(gè)信息時(shí)代箭养，更是一個(gè)智能化、人性化的時(shí)代哥牍。當(dāng)用戶在手機(jī)上瀏覽電腦端上的網(wǎng)頁時(shí)毕泌，而頁面完封不動(dòng)照搬在的移動(dòng)端上喝检，靠縮放和放大兩指去進(jìn)行瀏覽操作，閱讀文體時(shí)撼泛，盡管是年輕人也頗感吃力挠说。響應(yīng)式的網(wǎng)頁設(shè)計(jì)便越發(fā)覺得更為貼心，也更契合現(xiàn)代的科技水平愿题，標(biāo)示著現(xiàn)代人更人性化的追求损俭。
響應(yīng)式網(wǎng)頁成標(biāo)桿
- 作為電商行業(yè)巨頭的淘寶，用戶永遠(yuǎn)是最重要的潘酗，而用戶體驗(yàn)很大幾率上決定了用戶的第一印象杆兵，出于更為貼心的人性化設(shè)計(jì)和更舒暢的用戶體驗(yàn)，我想仔夺，淘寶網(wǎng)應(yīng)該會(huì)毫不猶豫地選擇響應(yīng)式了吧琐脏？
https://www.taobao.com/
網(wǎng)頁版淘寶
手機(jī)版淘寶網(wǎng) - 全國高校的教務(wù)系統(tǒng)可能只是改了學(xué)校名稱，連主色調(diào)都是一樣的缸兔。
而簡(jiǎn)潔的頁面，看上去就沒有過雜亂的目錄或者是廣告惰蜜，所以干脆地就統(tǒng)一沒有把網(wǎng)頁做成響應(yīng)式了吧阅签。
http://jwxt.nfsysu.cn/
教務(wù)系統(tǒng)電腦版
教務(wù)系統(tǒng)手機(jī)版
RWD和前后端的關(guān)系
前端蝎抽，顧名思義就是用戶在網(wǎng)頁上看到的所有布局設(shè)計(jì)路克，HTML是由文字圖片所組合成的元素樟结，而CSS的工作就是決定字體大小、顏色效果精算、背景選擇等等瓢宦，JavaScript則表現(xiàn)出生動(dòng)的動(dòng)態(tài)效果。
后端灰羽，這就是用戶看不見的驮履，程序開發(fā)人員才能看到的“暗面”廉嚼，就好比一盤美味的披薩玫镐，該怎么去制作餅底、披薩醬恐似，食材準(zhǔn)備和烤箱溫度就是后端工程師的事情了，而前端則是擺盤的工作咯~
RWD基于HTML傍念、CSS矫夷、JavaScript葛闷，對(duì)代碼進(jìn)行簡(jiǎn)單的修飾就可實(shí)現(xiàn)響應(yīng)性服務(wù)了，從而擺脫復(fù)雜的后端方案了双藕。
現(xiàn)在比以往任何時(shí)候淑趾，我們都在設(shè)計(jì)意在通過不同體驗(yàn)梯度來觀看的作品。響應(yīng)式網(wǎng)頁設(shè)計(jì)為我們提供了一條前進(jìn)的道路忧陪，最終讓我們能夠“為潮起潮落而設(shè)計(jì)”。
——Ethan Marcotte
