名詞解釋
- 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