一、什么是響應式網(wǎng)站：
現在，隨著(zhù)智能手機手機的普及，站長(cháng)們發(fā)現，從手機上來(lái)的流量一點(diǎn)不比在PC上來(lái)的少，所以，作為一種能夠自動(dòng)適應不同屏幕尺寸的網(wǎng)頁(yè)設計辦法，響應式設計(Responsive Design)正日益成為*受推崇的移動(dòng)網(wǎng)頁(yè)優(yōu)化方式。今天北斗網(wǎng)絡(luò )就跟大家分享一下設計響應式網(wǎng)站的哪些些事？希望對大家有所幫助。 網(wǎng)站響應式設計的原理就是在CSS中，有一個(gè)不常用到的屬性media。為了達到響應式設計的目的，讓css根據屏幕寬度(例如 media screen only @(max-width:480px))，使用不同的CSS代碼，從而達到自動(dòng)調整頁(yè)面DIV寬度的目的。當然，除了CSS，還可以使用JS對頁(yè)面內容進(jìn)行動(dòng)態(tài)的調整，不過(guò)這個(gè)技術(shù)不是很流行。在網(wǎng)站開(kāi)發(fā)過(guò)程中根據用戶(hù)行為以及設備環(huán)境進(jìn)行相應的操作和布局,使網(wǎng)站可針對不同平臺、尺寸和定向進(jìn)行智能化調整,實(shí)現了在智能手機和平板電腦等多種智能移動(dòng)終端瀏覽效果的流暢,防止頁(yè)面變形,并可在任一瀏覽終端進(jìn)行網(wǎng)站數據的同步更新。
二、為什么要采用響應式設計開(kāi)發(fā)網(wǎng)站：
如果你還對網(wǎng)站是否需要實(shí)現響應式設計存在質(zhì)疑的話(huà)，相信下面的9點(diǎn)會(huì )讓您會(huì )更加認可網(wǎng)站實(shí)現響應式布局的必要性。
1、86%的用戶(hù)認為企業(yè)的手機網(wǎng)站也應該好看。
2、智能手機用戶(hù)的數量在2014年已經(jīng)超過(guò)PC端的用戶(hù)數量。
3、73%的用戶(hù)會(huì )同時(shí)使用多種設備(或者他們有智能手機)。
4、49%的用戶(hù)稱(chēng)：如果企業(yè)的手機網(wǎng)站做的不夠好，往往會(huì )給人不重視用戶(hù)體驗的錯覺(jué)。
5、74%的智能手機擁有者之用手機上網(wǎng)。
6、49%的手機用戶(hù)認為企業(yè)的移動(dòng)網(wǎng)站還有改進(jìn)的空間。
7、據統計目前有17%的網(wǎng)絡(luò )流量都來(lái)自于手機。
8、68%的網(wǎng)民表示，更喜歡用手機在那些用戶(hù)友好度高的電商網(wǎng)站平臺上進(jìn)行購物。
9、67%的移動(dòng)設備用戶(hù)反應移動(dòng)網(wǎng)站的加載速度有待提高，響應式設計的普及迫在眉睫！
總結：隨著(zhù)越來(lái)越多的智能移動(dòng)設備( 手機，平板 )加入到互聯(lián)網(wǎng)中來(lái)，互聯(lián)網(wǎng)上的訪(fǎng)問(wèn)設備是爆炸性的增長(cháng)(屏幕的分辨率也是爆炸性的增長(cháng))。為了給手機和平板設備提供更好的體驗，必須在網(wǎng)站設計中使用響應式網(wǎng)站設計，并且整合從PC端到手機的各種屏幕尺寸和分辨率，用技術(shù)來(lái)使網(wǎng)頁(yè)適應不同分辨率的屏幕。
三、設計響應式網(wǎng)站的難點(diǎn)有哪些？
1、響應式網(wǎng)站設計難
因為不能使用絕對定位，那么在設計的時(shí)候需要考慮可讀性以及區域面積以及在不同的設備下的行為。這對一般的設計師來(lái)說(shuō)簡(jiǎn)直是一場(chǎng)災難。所以很少有出眾的響應式網(wǎng)站出現。
2、響應式網(wǎng)站實(shí)現更難
響應式設計出的稿子，當然還需要響應式的實(shí)現。響應式的基礎就是HTML5, CSS3。一般的建站公司，一般是沒(méi)有錢(qián)去聘用精通HTML5和CSS3技術(shù)的高手的。*多是讓程序員在寫(xiě)代碼之前看2天書(shū)，然后就趕鴨子上架。這就導致了即使設計師設計出了很棒的模板，但是在實(shí)現了之后，怎么看怎么不舒服。
3、屏幕尺寸多，很難做到一次編碼，到處運行
目前，主流的大家用來(lái)訪(fǎng)問(wèn)網(wǎng)頁(yè)的設備有：計算機(廢話(huà))，iPad，Android Pad(例如小米的)，智能手機。那么做一個(gè)網(wǎng)站，必須到這些設備上去測試和運行。普通的網(wǎng)站作坊很少有人會(huì )愿意花這么多的精力去測試一個(gè)網(wǎng)站。
4、響應式網(wǎng)站成本大
因為響應式設計需要對多個(gè)界面兼容、功能調試，導致整個(gè)制作過(guò)程需要UI設計師和前端工程師要不斷磨合制作。
總之，響應式網(wǎng)站設計，為計算機、手機、平板電腦等不同設備的訪(fǎng)問(wèn)用戶(hù)了提供更加舒適的界面和更好的用戶(hù)體驗(和速度)，而且隨著(zhù)目前移動(dòng)設備的增長(cháng)，已成為大勢所趨。
四、響應式網(wǎng)站的缺點(diǎn)有哪些？
1：對 IE 老板兼容性不友好
對于老版本 IE（IE6、IE7、IE8）支持不好，這是一個(gè)致命的問(wèn)題，如果你的網(wǎng)站用戶(hù)大多還采用老版本 IE 的話(huà)，建議不做響應式網(wǎng)頁(yè)設計。
2：靈活性有所欠缺
基于不同終端的設備屬性不同，對產(chǎn)品用戶(hù)體驗要求就會(huì )截然不同。內容比較多帶有功能性的網(wǎng)站不適合做響應式網(wǎng)站設計，如：電商類(lèi)型網(wǎng)站，寬屏的 pc 端內容如果全部要在手機端進(jìn)行展示，勢必導致手機端的界面非常長(cháng)，需要根據手機端屬性進(jìn)行重新信息，框架設計，這樣對響應網(wǎng)站要求非常高，實(shí)現難度與成本非常高。但是大型網(wǎng)站為了提高用戶(hù)體驗，通常做法，把高分辨率寬屏網(wǎng)站*小的響應尺寸響應到 1024px，不再適配手機端，手機端重新設計開(kāi)發(fā)一套手機網(wǎng)站，簡(jiǎn)單理解為 2.5 響應，如：電商網(wǎng)站亞馬遜、Calvin Klein、Nike、視頻網(wǎng)站 Youtube，等。
3：速度可能會(huì )變慢
由于響應式頁(yè)面是同時(shí)下載多套 CSS 樣式代碼，可能在手機上就下載 PC、Pad 的冗余代碼，導致文件變大，影響加載速度。不過(guò) CSS 樣式的代碼占用內存相對圖片來(lái)說(shuō)不算大，所以如果前端編程處理得好前提之下，這就不會(huì )影響網(wǎng)站加載速度。根據響應式網(wǎng)站的優(yōu)缺點(diǎn)，我們不難看出：企業(yè)官網(wǎng)、單頁(yè)宣傳網(wǎng)站非常適合做響應式網(wǎng)站設計，由于它們的界面內容比較少，結構比較簡(jiǎn)單，所以在不同終端、不同尺寸設備上進(jìn)行網(wǎng)站信息框架調整、內容加減、圖片、文字、柵格響應比較容易。內容比較多帶有功能性的網(wǎng)站不適合做響應式網(wǎng)站設計，如：電商類(lèi)型網(wǎng)站。但是隨著(zhù)科技不斷發(fā)展，響應技術(shù)逐漸完善，給響應式設計提供強有力的技術(shù)支持；響應式設計可以在不同終端提
供完美展示效果與友好的用戶(hù)體驗，吻合用戶(hù)體驗至上的趨勢。所以說(shuō)，響應式設計必定是未來(lái)發(fā)展趨勢。
五、讓你的網(wǎng)站變成響應式的3個(gè)簡(jiǎn)單步驟
1 – 響應式網(wǎng)站的布局
當創(chuàng )建一個(gè)響應式網(wǎng)站，或讓現有的網(wǎng)站變成響應式的，*先要關(guān)注的元素的布局。我在建立響應式的網(wǎng)站，總是先創(chuàng )建一個(gè)非響應的布局，頁(yè)面寬度固定大小。如果非響應版本完成得非常不錯，我再添加媒體查詢(xún)（Media Queries）和響應式代碼。這種操作方式更容易實(shí)現響應式特性，在同一時(shí)間專(zhuān)注于一個(gè)任務(wù)。
當你已經(jīng)完成了無(wú)響應的網(wǎng)站，做的*件事是在你的 HTML 頁(yè)面，粘貼下面的代碼到和標簽之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶(hù)縮放頁(yè)面。
現在是時(shí)候添加一些媒體查詢(xún)了。根據 W3C 網(wǎng)站，媒體查詢(xún)由媒體類(lèi)型和零個(gè)或多個(gè)媒體查詢(xún)的條件表達式組成。通過(guò)使用媒體查詢(xún)，外觀(guān)呈現可以針對特定范圍內的輸出設備，而不需要改變內容本身。換句話(huà)說(shuō)，媒體查詢(xún)讓您的網(wǎng)站在各種各種顯示器上看起來(lái)都很好，從小的智能手機到大的電腦屏幕等等。
媒體查詢(xún)取決于你的網(wǎng)站布局，所以對我來(lái)說(shuō)為您提供一個(gè)現成可以使用的代碼片段有點(diǎn)困難。但是，下面的代碼對于大多數網(wǎng)站都是一個(gè)很好的起點(diǎn)。在這個(gè)例子中，#primary 是主要內容區域，#secondary 是側欄。
從代碼中你可以看到，我定義了兩種規格：*先有一個(gè)*大寬度為1060px，為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個(gè)規格是用于平板電腦和更小的屏幕尺寸。
由于智能手機的屏幕尺寸小，我決定給 #primary 設置100%的寬度，#secondary 也設置100%的寬度，他將在 #primary 下面。 正如我已經(jīng)說(shuō)過(guò)的，你可能必須要對這段代碼位進(jìn)行修改才能適應您的網(wǎng)站的具體需求。
/* 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; }
}
完成以后，讓我們看看你的布局是如何響應的。要做到這一點(diǎn)，我用這 Matt Kersley 創(chuàng )建的一款非常的響應式測試工具。
2 – 媒體
一個(gè)響應式的布局是實(shí)現響應網(wǎng)站的第一步�，F在，讓我們把注意力集中在另外一個(gè)現代化網(wǎng)站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會(huì )大于他們的父容器，代碼非常簡(jiǎn)單，適用于大多數網(wǎng)站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。
img { max-width: 100%; }
雖然上述技術(shù)是有效的，有時(shí)你可能需要有更多的圖像控制權，例如根據客戶(hù)端的顯示大小，顯示不同的圖像。
這是由 Nicolas Gallagher 發(fā)明的好方法。讓我們看看 HTML：
正如你可以看到，我們使用 data-* 屬性來(lái)存儲替換圖像的 URL�，F在，讓我們使用強大的 CSS3 來(lái)為匹配 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 – 響應式網(wǎng)站的字體
本教程的*后一步絕對非常重要，但往往被網(wǎng)站開(kāi)發(fā)人員忽視——字體。到現在為止，大多數開(kāi)發(fā)人員（包括我自己）使用像素來(lái)定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對于響應式網(wǎng)站來(lái)說(shuō)應該有響應式的字體。事實(shí)上，一個(gè)響應式的字體大小應關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應客戶(hù)端的屏幕。
CSS3 規范引入了一個(gè)新的單位叫 rem，和 em 類(lèi)相似，但相對于 HTML 元素來(lái)說(shuō)， rem 更易于使用。
rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大�。�
html { font-size:100%; }
完成后，您可以定義響應式的字體大小，如下所示：
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;} } |
請注意，舊瀏覽器不支持 rem 單元，所以不要忘了實(shí)現一個(gè)替代。
