響應(yīng)式網(wǎng)頁設(shè)計(jì)

名詞解釋

  • 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í)代的到來晶衷。


2010年全球桌面與移動(dòng)與平板電腦市場(chǎng)份額

2. 超越性的交叉點(diǎn)
2016年10月份中旬蓝纲,從“ 每個(gè)家庭都有一部電腦 ” 延津到了 “ 人手一臺(tái)手機(jī) ” ,得益于技術(shù)的革新晌纫,市面上各類型的手機(jī)多得令人眼花繚亂税迷。而設(shè)備的屏幕大小類型、設(shè)備布局能力也復(fù)雜了起來锹漱。

2016年全球桌面與移動(dòng)與平板電腦市場(chǎng)份額

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末赤嚼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子更卒,更是在濱河造成了極大的恐慌等孵,老刑警劉巖蹂空,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俯萌,死亡現(xiàn)場(chǎng)離奇詭異上枕,居然都是意外死亡咐熙,警方通過查閱死者的電腦和手機(jī)辨萍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門棋恼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锈玉,“玉大人爪飘,你說我怎么就攤上這事拉背∈ζ椋” “怎么了椅棺?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵犁罩,是天一觀的道長(zhǎng)两疚。 經(jīng)常有香客問我床估,道長(zhǎng)诱渤,這世上最難降的妖魔是什么顷窒? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮鞋吉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谓着。我一直安慰自己泼诱,他們只是感情好赊锚,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著舷蒲,像睡著了一般耸袜。 火紅的嫁衣襯著肌膚如雪牲平。 梳的紋絲不亂的頭發(fā)上堤框,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音纵柿,去河邊找鬼蜈抓。 笑死昂儒,一個(gè)胖子當(dāng)著我的面吹牛沟使,可吹牛的內(nèi)容都是我干的渊跋。 我是一名探鬼主播腊嗡,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼拾酝,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了微宝?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤蟋软,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后岳守,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡碌冶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拒逮。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖滩援,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情塔嬉,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布谨究,位于F島的核電站,受9級(jí)特大地震影響胶哲,放射性物質(zhì)發(fā)生泄漏畔塔。R本人自食惡果不足惜纪吮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一俩檬、第九天 我趴在偏房一處隱蔽的房頂上張望碾盟。 院中可真熱鬧棚辽,春花似錦冰肴、人聲如沸屈藐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽检痰。三九已至包归,卻和暖如春铅歼,著一層夾襖步出監(jiān)牢的瞬間公壤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國打工厦幅, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人确憨。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親吞歼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一浆熔、名詞解釋 名詞引用自教科書——《響應(yīng)式Web設(shè)計(jì)——HTML5和CSS3實(shí)戰(zhàn)(第二版)》 響應(yīng)式Web設(shè)計(jì)(R...
    GeekJun閱讀 770評(píng)論 0 3
  • 名詞解釋: Web標(biāo)準(zhǔn):WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合医增。網(wǎng)頁主要由三部分組成:結(jié)構(gòu)(Structu...
    wo_jzf閱讀 1,356評(píng)論 0 1
  • 名詞解釋 1、響應(yīng)式web設(shè)計(jì):響應(yīng)式web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕叶骨,可以讓網(wǎng)站的布局和功能隨...
    Sugwa閱讀 961評(píng)論 0 0
  • 名詞解釋 響應(yīng)式Web設(shè)計(jì)(Responsive Web Design) 所謂響應(yīng)式Web設(shè)計(jì),就是網(wǎng)頁內(nèi)容會(huì)隨著...
    Autistic_8d3b閱讀 930評(píng)論 0 0
  • 文案:學(xué)神有一個(gè)小秘密忽刽,那就是每天偷偷的喜歡學(xué)霸,偷偷的占一點(diǎn)小便宜…… 學(xué)霸也有一個(gè)小秘密夺欲,那就是他知道學(xué)神喜歡...
    有時(shí)迷糊閱讀 624評(píng)論 0 0