一、什(shen)么(me)是響(xiang)應式網(wang)站：
現在(zai)，隨著智能手機(ji)手機(ji)的普(pu)及，站長們(men)發現，從手機(ji)上(shang)來的流量(liang)一(yi)點不(bu)比在(zai)PC上來的少，所以(yi)，作(zuo)為一(yi)種(zhong)能(neng)夠(gou)自(zi)動(dong)適應不(bu)同(tong)屏幕尺寸(cun)的網頁(ye)設計辦(ban)法，響(xiang)應式設計(Responsive Design)正日(ri)益成為(wei)*受推(tui)崇(chong)的(de)移動網(wang)頁優化(hua)方式。今天百(bai)拓網(wang)絡就跟(gen)大家分享一下設計(ji)響(xiang)應(ying)式網(wang)站的(de)哪些些事？希望對大家有所(suo)幫助。 網站響應式設計的原理就是在CSS中，有一個不常用(yong)到的屬性media。為了達到響(xiang)應式設(she)計的目的，讓css根(gen)據(ju)屏幕寬度(例如 media screen only @(max-width:480px))，使用(yong)不(bu)同的(de)CSS代碼，從(cong)而達(da)到自動調整頁面DIV寬度的目(mu)的。當然，除了CSS，還(huan)可以使用JS對頁面內容(rong)進行動態的調整，不過這個技(ji)術不是很流行。在網站開(kai)發過程中(zhong)根據用(yong)戶行(xing)為(wei)以及設備(bei)環境進行(xing)相應的操作和布(bu)局(ju),使網(wang)站(zhan)可針(zhen)對不(bu)同(tong)平臺、尺寸和定向進(jin)行智(zhi)能(neng)化調(diao)整,實現了在智(zhi)能(neng)手機和平板電腦等多(duo)種智(zhi)能(neng)移動終端(duan)瀏覽效果的流暢,防止(zhi)頁(ye)面變形,并可在任一瀏覽終端(duan)進(jin)行網(wang)站(zhan)數據的同(tong)步更新。
二、為什么要采用(yong)響應式(shi)設計開發網站：
如果(guo)你還對(dui)網站是否需(xu)要實現響應(ying)式設計存在質疑的(de)話，相信(xin)下面的(de)9點會讓您會更加認可網站實現響應式布(bu)局的必要性。
1、86%的用(yong)戶(hu)認(ren)為企業的手機網站也應該好看。
2、智能手(shou)機用戶的(de)數量(liang)在2014年(nian)已(yi)經超過(guo)PC端的用戶數量。
3、73%的用戶會同時使用多(duo)種設備(或者他們有智(zhi)能手機)。
4、49%的用戶稱：如果(guo)企業的手機網(wang)站做的不夠好，往(wang)往(wang)會給人(ren)不重視(shi)用戶體驗(yan)的錯覺。
5、74%的(de)智能手(shou)機擁有者之(zhi)用手(shou)機上網(wang)。
6、49%的手機用戶認為企業的移動(dong)網站還(huan)有(you)改進的空間。
7、據(ju)統計目前有17%的網絡流量都來(lai)自于手機。
8、68%的網民表示，更喜歡用(yong)手機在(zai)那(nei)些用(yong)戶友(you)好(hao)度高的電商(shang)網站平臺上進(jin)行購物。
9、67%的(de)移(yi)(yi)動(dong)設備用戶反應(ying)移(yi)(yi)動(dong)網(wang)站(zhan)的(de)加載(zai)速度(du)有待提高，響應(ying)式設計的(de)普及迫(po)在眉(mei)睫！
總結：隨(sui)著(zhu)越來越多(duo)的(de)智能移(yi)動設備( 手機，平(ping)板 )加入到互聯網中來，互聯網上的(de)訪問(wen)設(she)備是(shi)爆炸性的(de)增長(chang)(屏幕的分辨率也是爆炸(zha)性的增(zeng)長(chang))。為了給手機和平(ping)板設(she)備提供更好的體驗，必(bi)須(xu)在網(wang)站設(she)計(ji)中使用響應式網(wang)站設(she)計(ji)，并且整(zheng)合從PC端到手(shou)機的(de)各種屏幕尺(chi)寸和分辨率(lv)，用技術來使網(wang)頁適(shi)應不同分辨率(lv)的(de)屏幕。
三、設計響應式網站的(de)難點有(you)哪些(xie)？
1、響應式(shi)網站(zhan)設計難
因為不能使用(yong)絕對定位，那么在設(she)計的時(shi)候(hou)需要考(kao)慮可(ke)讀性以(yi)及區(qu)域面積以(yi)及在不同的設(she)備下的行(xing)為。這(zhe)對一般的設(she)計師來說(shuo)簡(jian)直(zhi)是一場災難。所以(yi)很(hen)少(shao)有出眾的響應式網站(zhan)出現。
2、響應(ying)式網站實現更難
響應式設計出的稿子，當然還需要響應式的實現。響應式的基礎就是HTML5, CSS3。一(yi)般(ban)的建站公司(si)，一(yi)般(ban)是沒(mei)有錢去(qu)聘用精通HTML5和CSS3技術的(de)高手(shou)的(de)。*多是(shi)讓程序員在寫代碼之前看2天書，然(ran)后(hou)就趕鴨子上(shang)架(jia)。這就導致(zhi)了(le)(le)即使設計師設計出(chu)了(le)(le)很棒(bang)的模(mo)板，但是在實現了(le)(le)之(zhi)后(hou)，怎么看怎么不舒服(fu)。
3、屏幕尺寸多，很難做(zuo)到一次編碼，到處運行
目前，主流的大家用來訪問網頁的設備有：計算機(廢話(hua))，iPad，Android Pad(例如小米的)，智能手機。那么做(zuo)一個網(wang)站，必(bi)須(xu)到這些(xie)設(she)備(bei)上去測(ce)試(shi)和(he)運行。普通的(de)網(wang)站作坊很少有人會愿(yuan)意花(hua)這么多的(de)精力去測(ce)試(shi)一個網(wang)站。
4、響應式網(wang)站(zhan)成(cheng)本(ben)大(da)
因為響應式設計需要對多個界面兼容、功能調試，導致整個制作過程需要UI設計師和前端工程(cheng)師要(yao)不斷(duan)磨(mo)合制作(zuo)。
總之，響應式網站設計，為計算機、手機、平板電腦等不同設備的訪問用戶了提供更加舒適的界面和更好的用戶體驗(和速度)，而(er)且隨(sui)著(zhu)目(mu)前移動設備的增長(chang)，已成為大勢所(suo)趨。
四、響應式網(wang)站的缺點有哪些？
1：對(dui) IE 老(lao)板(ban)兼容性(xing)不友好
對(dui)于老版本 IE（IE6、IE7、IE8）支持不好，這是一個致命的(de)(de)問題，如果你(ni)的(de)(de)網(wang)站用戶(hu)大多還采用老版本 IE 的(de)(de)話(hua)，建議不做響應式網(wang)頁設計(ji)。
2：靈活性有所欠(qian)缺
基于(yu)不同(tong)終端的(de)設備(bei)屬性不同(tong)，對產品用戶體驗要求就會截然不同(tong)。內容(rong)比較多(duo)帶(dai)有功能(neng)性的(de)網(wang)站(zhan)不適(shi)合做(zuo)響應式網(wang)站(zhan)設計(ji)，如(ru)：電商類型(xing)網(wang)站(zhan)，寬(kuan)屏的(de) pc 端內容如果全部要在手機端進行展示，勢必導致手機端的界面非常長，需要根據手機端屬性進行重新信息，框(kuang)架設計(ji)，這樣對(dui)響應網站要求非常高(gao)(gao)，實現(xian)難度與成本(ben)非常高(gao)(gao)。但是大型(xing)網站為了提高(gao)(gao)用戶體(ti)驗，通(tong)常做(zuo)法，把高(gao)(gao)分辨(bian)率寬屏網站*小的響應尺寸(cun)響應到 1024px，不再適配手機端，手機端重新設計開發一套手機網站，簡單理解為 2.5 響應，如：電商網站亞馬遜、Calvin Klein、Nike、視頻網站 Youtube，等。
3：速度(du)可(ke)能會變慢
由(you)于響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)頁面(mian)是(shi)(shi)同(tong)時下載(zai)(zai)(zai)多套 CSS 樣式(shi)(shi)(shi)(shi)代(dai)碼，可能(neng)在(zai)手機上就下載(zai)(zai)(zai) PC、Pad 的冗(rong)余(yu)代(dai)碼，導致文件(jian)變大，影(ying)響(xiang)(xiang)(xiang)加載(zai)(zai)(zai)速(su)度(du)。不(bu)過 CSS 樣式(shi)(shi)(shi)(shi)的代(dai)碼占用內存相對圖片來說不(bu)算大，所以如(ru)果前端(duan)編(bian)程處理得好前提(ti)(ti)之下，這就不(bu)會影(ying)響(xiang)(xiang)(xiang)網(wang)(wang)(wang)站(zhan)(zhan)加載(zai)(zai)(zai)速(su)度(du)。根據響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)網(wang)(wang)(wang)站(zhan)(zhan)的優(you)缺點，我們不(bu)難(nan)看出：企業官網(wang)(wang)(wang)、單頁宣傳網(wang)(wang)(wang)站(zhan)(zhan)非常適(shi)合做響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)網(wang)(wang)(wang)站(zhan)(zhan)設(she)計(ji)，由(you)于它們的界(jie)面(mian)內容(rong)(rong)比較少，結構(gou)比較簡單，所以在(zai)不(bu)同(tong)終(zhong)端(duan)、不(bu)同(tong)尺寸設(she)備上進行網(wang)(wang)(wang)站(zhan)(zhan)信息框架調整、內容(rong)(rong)加減、圖片、文字、柵格響(xiang)(xiang)(xiang)應(ying)比較容(rong)(rong)易。內容(rong)(rong)比較多帶(dai)有(you)功(gong)能(neng)性的網(wang)(wang)(wang)站(zhan)(zhan)不(bu)適(shi)合做響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)網(wang)(wang)(wang)站(zhan)(zhan)設(she)計(ji)，如(ru)：電商類型網(wang)(wang)(wang)站(zhan)(zhan)。但(dan)是(shi)(shi)隨著科技(ji)不(bu)斷發展，響(xiang)(xiang)(xiang)應(ying)技(ji)術逐漸完善，給響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)設(she)計(ji)提(ti)(ti)供強有(you)力(li)的技(ji)術支持；響(xiang)(xiang)(xiang)應(ying)式(shi)(shi)(shi)(shi)設(she)計(ji)可以在(zai)不(bu)同(tong)終(zhong)端(duan)提(ti)(ti)
供完美(mei)展(zhan)示效果與友好(hao)的用戶(hu)體(ti)驗，吻合用戶(hu)體(ti)驗至(zhi)上的趨(qu)勢。所以說(shuo)，響應式設(she)計必定(ding)是(shi)未(wei)來(lai)發展(zhan)趨(qu)勢。
五(wu)、讓你(ni)的(de)網站(zhan)變(bian)成響應式的(de)3個簡單步驟
1 – 響應式網站的布(bu)局
當創建一個響應(ying)(ying)式網(wang)(wang)站，或(huo)讓(rang)現有的(de)網(wang)(wang)站變成(cheng)響應(ying)(ying)式的(de)，*先要關注的(de)元素的(de)布(bu)局(ju)。我(wo)在建立響應(ying)(ying)式的(de)網(wang)(wang)站，總是先創建一個非(fei)響應(ying)(ying)的(de)布(bu)局(ju)，頁面寬度固定大小。如果非(fei)響應(ying)(ying)版本(ben)完成(cheng)得非(fei)常(chang)不(bu)錯，我(wo)再添(tian)加媒體查詢（Media Queries）和響應式(shi)代碼。這種操(cao)作方式(shi)更容(rong)易實現(xian)響應式(shi)特性，在同(tong)一時間專注(zhu)于一個(ge)任務。
當你已經完成了無響應的網站，做的*件事是(shi)在(zai)你的 HTML 頁面，粘貼下面的代碼到和標簽之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。
現在(zai)是時候添加一些媒(mei)體(ti)查(cha)(cha)詢(xun)(xun)了(le)。根據 W3C 網(wang)站，媒(mei)體(ti)查(cha)(cha)詢(xun)(xun)由媒(mei)體(ti)類型和零個或多個媒(mei)體(ti)查(cha)(cha)詢(xun)(xun)的(de)條件表達(da)式組成。通過使用媒(mei)體(ti)查(cha)(cha)詢(xun)(xun)，外觀呈(cheng)現可以針對特定范(fan)圍內(nei)的(de)輸出(chu)設(she)備，而不需要改變內(nei)容本(ben)身(shen)。換句話說，媒(mei)體(ti)查(cha)(cha)詢(xun)(xun)讓(rang)您(nin)的(de)網(wang)站在(zai)各種各種顯示器上看(kan)起來都(dou)很好，從小的(de)智(zhi)能手機到大的(de)電(dian)腦屏幕等(deng)等(deng)。
媒(mei)體(ti)查詢取決于你的(de)網(wang)站布局，所以對(dui)(dui)我來說(shuo)為您提供一(yi)個現成可以使(shi)用的(de)代(dai)(dai)碼片段有點(dian)困(kun)難。但(dan)是，下面的(de)代(dai)(dai)碼對(dui)(dui)于大多數網(wang)站都是一(yi)個很好的(de)起(qi)點(dian)。在這(zhe)個例子中，#primary 是主要內容區域，#secondary 是側欄。
從(cong)代碼中你可以看(kan)到，我定義了兩種規(gui)格：*先有一個*大寬度為1060px，為平板電腦優化的(de)橫向(xiang)顯示。#primary 占在其父容(rong)器寬度的(de)67%，#senondary 占30%，再加(jia)上3%的(de)左外邊(bian)距。 第二個規(gui)格是用(yong)于平板電腦和(he)更小(xiao)的(de)屏(ping)幕尺寸。
由于智能(neng)手機的屏(ping)幕(mu)尺寸小(xiao)，我決(jue)定(ding)給 #primary 設置(zhi)100%的寬度，#secondary 也設置(zhi)100%的寬度，他將在 #primary 下面(mian)。 正如我已經說(shuo)過的，你可能(neng)必須(xu)要對這段代碼(ma)位(wei)進(jin)行修改才(cai)能(neng)適應您的網站的具體需求。
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
完成以后(hou)，讓我(wo)們看看你的(de)布局是如何響應的(de)。要做(zuo)到這(zhe)一(yi)點(dian)，我(wo)用這(zhe) Matt Kersley 創建的一款非常的響應式測試工具。
2 – 媒體
一個(ge)響應式的(de)布局是(shi)實現響應網站(zhan)的(de)第(di)一步。現在，讓我們(men)把注意力集中(zhong)在另(ling)外一個(ge)現代化網站(zhan)非(fei)常重要的(de)方面：媒體(ti)，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大于他們的父容器，代碼非常簡單，適用于大多數網站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。
img { max-width: 100%; }
雖然(ran)上述技術是(shi)有效的，有時你可能需要(yao)有更多的圖像控(kong)制權，例如根據客(ke)戶(hu)端的顯示大小，顯示不同的圖像。
這是由 Nicolas Gallagher 發明的好方法。讓我們看看 HTML：
正如你可以(yi)看(kan)到，我(wo)們(men)使用 data-* 屬性來存儲替換圖像的 URL。現在，讓我們使用強大的 CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：
@media (min-device-width:600px) {
img[data-src-600px] {
; content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
3 – 響應式網站的字體
本教程的(de)*后一步絕對非常(chang)重要，但往往被網站(zhan)(zhan)開(kai)發人(ren)員忽(hu)視——字(zi)(zi)體(ti)(ti)。到現(xian)在為止，大多數開(kai)發人(ren)員（包括我自己）使用像(xiang)素來(lai)定義字(zi)(zi)體(ti)(ti)的(de)大小。雖然像(xiang)素在普通網站(zhan)(zhan)使用是OK的(de)，但是對于(yu)響(xiang)應(ying)(ying)式(shi)網站(zhan)(zhan)來(lai)說應(ying)(ying)該有響(xiang)應(ying)(ying)式(shi)的(de)字(zi)(zi)體(ti)(ti)。事(shi)實上，一個響(xiang)應(ying)(ying)式(shi)的(de)字(zi)(zi)體(ti)(ti)大小應(ying)(ying)關聯它(ta)的(de)父容器的(de)寬度，這(zhe)樣它(ta)才可以適應(ying)(ying)客戶端的(de)屏幕(mu)。
CSS3 規(gui)范引入(ru)了一個新的(de)單位叫(jiao) rem，和 em 類相似，但相對(dui)于 HTML 元(yuan)素來說， rem 更易于使用。
rem 是相(xiang)對(dui)于(yu) HTML 元素的，不(bu)要(yao)忘(wang)了重置 HTML 的字體大小：
html { font-size:100%; }
完(wan)成后，您可以定義響(xiang)應式的字體(ti)大小，如下(xia)所示：
1 2 3 | @media (min-width: 640px) { body {font-size:1rem;} }@media (min-width:960px) { body {font-size:1.2rem;} }@media (min-width:1100px) { body {font-size:1.5rem;} } |
請注(zhu)意(yi)，舊瀏覽器不(bu)支(zhi)持 rem 單元(yuan)，所以不(bu)要忘了(le)實現一個(ge)替代。
