名詞解釋
響應(yīng)式網(wǎng)頁設(shè)計(RWD)
響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)是一種網(wǎng)絡(luò)頁面設(shè)計布局贮竟,其主要是作用是集中創(chuàng)建頁面的圖片排版大小锨用,智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局谁帕。它是由Ethan Marcotte在2010年是發(fā)明的,他當(dāng)時用了彈性網(wǎng)格布局岸梨、彈性圖片/媒體喜颁、媒體查詢,來實(shí)現(xiàn)了一個解決方案曹阔。
為什么需要響應(yīng)式網(wǎng)頁設(shè)計
隨著移動互聯(lián)網(wǎng)的到來半开,網(wǎng)民對網(wǎng)站提出了更高的要求,網(wǎng)站不僅需要滿足電腦端客戶的瀏覽需要赃份,還需要考慮到網(wǎng)民通過移動手機(jī)寂拆、平板電腦來訪問網(wǎng)站。網(wǎng)站就需要適應(yīng)對平臺的用戶訪問抓韩,所以需要的不是一個普通網(wǎng)站纠永,需要一個響應(yīng)式的網(wǎng)站。
這是過去一年手機(jī)谒拴、平板尝江、臺式機(jī)的使用情況,手機(jī)遙遙領(lǐng)先英上,而平板也有少量用戶炭序,所以,為了滿足各種不同用戶的需求苍日,我們需要響應(yīng)式網(wǎng)站惭聂。
網(wǎng)站例子
使用響應(yīng)式的網(wǎng)站
嗶哩嗶哩彈幕網(wǎng)
沒有使用響應(yīng)式的網(wǎng)站
中山大學(xué)南方學(xué)院教務(wù)管理系統(tǒng)
RWD的三項組成科技
彈性網(wǎng)格布局
就是打開網(wǎng)站時,你可以縮放瀏覽器窗口相恃,文本便會根據(jù)屏幕縮放自動重排辜纲。
彈性圖片/媒體
運(yùn)用創(chuàng)建CSS文件的方法,使用代碼讓圖片會縮放占滿最大的可用空間豆茫。
媒體查詢
媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性(如視口寬度侨歉、屏幕比例、設(shè)備方向:橫向或縱向)為其設(shè)定CSS樣式揩魂,媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成幽邓。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color (等)火脉。使用媒體查詢牵舵,可以在不改變頁面內(nèi)容的情況下,為特定的一些輸出設(shè)備定制顯示效果倦挂。
RWD與前端的關(guān)系
前端:通常是指網(wǎng)站的前臺部分畸颅。前端開發(fā)中最基本也是最必須的三個技能是HTML、CSS方援、JavaScript
·HTML是超文本標(biāo)記語言 (Hyper Text Markup Language)没炒,是構(gòu)建網(wǎng)頁的基本元素
·級聯(lián)樣式表(Cascading Style Sheet)簡稱“CSS”,通常又稱為“風(fēng)格樣式表(Style Sheet)”犯戏,它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計的送火。
·JavaScript要目的是為了解決服務(wù)器端語言拳话,為網(wǎng)頁提供了數(shù)據(jù)驗證的基本功能。