一、響應(yīng)式設(shè)計概述

1、未來網(wǎng)頁流行區(qū)域

隨著3G、4G的普及，越來越多的人使用手機(jī)上網(wǎng)。

移動設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁設(shè)計師不得不面對一個難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁？

2、早期解決方案

手機(jī)的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達(dá)到了2000像素。同樣的內(nèi)容，要在大小迥異的屏幕上，都呈現(xiàn)出滿意的效果，并不是一件容易的事。

很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護(hù)好幾個版本，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復(fù)雜度。

3、解決方案

于是，很早就有人設(shè)想，能不能"一次設(shè)計，普遍適用"，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局（layout）？

4、自使用網(wǎng)頁設(shè)計

2010年，Ethan Marcotte提出了"自適應(yīng)網(wǎng)頁設(shè)計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。

他制作了一個范例，里面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。

超寬屏幕PC端：

純屏PC端：

平板計算機(jī)：

手機(jī)端：

5、響應(yīng)式設(shè)計核心原理（有舍有得）

二、響應(yīng)式設(shè)計核心

1、DW（Dreamweaver CC）設(shè)計軟件的使用

2、響應(yīng)式核心標(biāo)簽viewport

上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。

3、不使用絕對寬度

由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。

具體說，CSS代碼不能指定像素寬度：

如：xxx px;

只能指定百分比寬度：

如： xx%;

4、使用相對大小的字體

字體也不能使用絕對大小（px），而只能使用相對大?。╮em）。

rem是相對于網(wǎng)頁根元素的文字大小，默認(rèn)html標(biāo)簽的文字大小為16px，1rem = 16px

html {
　　font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代碼指定，字體大小是頁面默認(rèn)大小的100%，即16像素

h1 {
　　font-size: 1.5rem;
}

然后，h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）。

small {
　　font-size: 0.875rem;
}

small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）

技巧：在實際項目開發(fā)中，如果按照以上形式進(jìn)行換算過于麻煩，有沒有更簡單的辦法來實現(xiàn)這個單位的換算呢？

答：可以人為設(shè)計html標(biāo)簽的文字大小

html {

font-size:62.5%; 相對于16像素的62.5%，等于10px

}

html元素的文字大小為10px，根據(jù)rem的設(shè)定規(guī)則，其1rem = 10px，以后換算時：

12px = 1.2rem 14px = 1.4rem 16px = 1.6rem

5、媒體查詢標(biāo)簽（重點）

"自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的CSS文件。

<link rel="stylesheet" type="text/css" media="screen and (max- 400px)" href="tinyScreen.css" />

上面的代碼意思是，如果屏幕寬度小于400像素（max- 400px），就加載tinyScreen.css文件。

<link rel="stylesheet" type="text/css" media="screen and (min- 400px) and (max- 600px)" href="smallScreen.css" />

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

6、讓多媒體標(biāo)簽實現(xiàn)自適應(yīng)

除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)多媒體的自動縮放。

img { max- 100%;}

img, object, embed { max- 100%;}

三、響應(yīng)式案例

1、讓網(wǎng)頁可以識別設(shè)別的寬度

2、使用media query標(biāo)簽實現(xiàn)根據(jù)不同的寬度加載不同的css

實際項目開發(fā)中，一般是分為三部分：

手機(jī)端：最大寬度小于767px

平板端：介于768px到1023px之間

PC端：最小寬度大于1024px

3、讓網(wǎng)頁可以自動去適應(yīng)終端的寬度，

為了讓網(wǎng)頁自動去適應(yīng)屏幕的寬度，可以在整個內(nèi)容的最外層為其添加一個div元素

4、初始化CSS代碼

5、設(shè)計Logo導(dǎo)航條

6、設(shè)計相關(guān)板塊

詳細(xì)代碼參考css/phone.css，內(nèi)容如下：

四、Font Awesome矢量圖標(biāo)集

我們在實際項目開發(fā)中，經(jīng)常會使用小圖標(biāo)的功能，在早期都是采用PS等設(shè)計軟件進(jìn)行設(shè)計開發(fā)的，但是在現(xiàn)在大家可以使用Bootstrap框架中內(nèi)置的矢量圖標(biāo)集來實現(xiàn)網(wǎng)頁中的小圖標(biāo)——Font Awesome矢量圖標(biāo)集

1、復(fù)制css與fonts文件夾到項目目錄中并保持路徑一致

2、使用link標(biāo)簽引入font-awesom.min.css

3、在網(wǎng)頁的合適位置，設(shè)計HTML與CSS代碼

4、使用Font Awesome矢量圖標(biāo)集

<i class = "fa(標(biāo)記) fa-2x(大小) fa-home(矢量圖標(biāo)集名稱)"></i>

效果如下：

擴(kuò)展：撥打電話與發(fā)送短信功能（html5標(biāo)簽）

五、十分鐘搞定Javascript特效

我們在實際項目開發(fā)中，經(jīng)常會使用特效功能，但是對于我們的JS的要求會比較高，如果想在實際項目開發(fā)中，高效的完成Javascript特效不妨考慮使用SuperSlider2插件。

這款插件是由動易現(xiàn)設(shè)計師——大話主席設(shè)計開發(fā)的基于jQuery的一款Javascript特效庫。

使用前提：在使用SuperSlider時必須載入以下兩個Javascript文件：

1、設(shè)計網(wǎng)頁中的html與css代碼

2、為元素添加.hd與.bd標(biāo)簽

使用SuperSlider2有一個前提：必須在標(biāo)簽中包含了兩個class=hd（控制條）與class=bd（內(nèi)容區(qū)）的div標(biāo)簽

3、在demo.html頁面找到你要使用的特效

把以上代碼復(fù)制放到剛才html標(biāo)簽的最低端即可，如下圖所示：

六、綜合案例：整合微信與響應(yīng)式

1、項目需求

① 可以在先瀏覽器響應(yīng)式網(wǎng)站，還需要提供數(shù)據(jù)庫的支持

② 在微信中定義自定義菜單（服務(wù)號），自定義一共有三個：

微網(wǎng)站：點擊這個鏈接，可以跳轉(zhuǎn)到響應(yīng)式網(wǎng)站的首頁

產(chǎn)品中心：點擊產(chǎn)品中心連接，可以以圖文信息的形式返回數(shù)據(jù)庫中最新的5個產(chǎn)品

聯(lián)系我們：以文本形式顯示公司的聯(lián)系信息

③ 當(dāng)用戶關(guān)注我們的微信公眾賬號時，可以實時返回一條圖文信息，引導(dǎo)用戶進(jìn)入微站

2、搭建dedecms系統(tǒng)到BAE云平臺

使用SVN上傳dedecms系統(tǒng)源代碼到百度的BAE云平臺，上傳完畢后，我們可以直接預(yù)覽效果，但是其并沒有數(shù)據(jù)庫的支持。

3、讓BAE提供BAE的支持

1）單擊BAE平臺中的擴(kuò)展服務(wù)

2）添加新服務(wù)（MySQL）

3）選擇MySQL套餐

4）創(chuàng)建完成后，效果如下圖所示

5）使用phpmyadmin導(dǎo)入數(shù)據(jù)到數(shù)據(jù)庫

6）設(shè)置dedecms系統(tǒng)的配置文件，連接MySQL數(shù)據(jù)庫

在dedecms系統(tǒng)的根目錄下有一個data文件夾，里面有一個common.inc.php文件，這個文件就是dedecms系統(tǒng)的配置文件，相當(dāng)于中級項目的config.php

通過單擊數(shù)據(jù)庫名稱，可以獲取如下MySQL信息：

設(shè)置common.inc.php文件，效果如下圖所示：

設(shè)置完成后，通過SVN軟件上傳到服務(wù)器端。

7）登陸dedecms系統(tǒng)后臺http://域名/dede/即可，輸入用戶名admin密碼admin

如果出現(xiàn)如上界面代表已經(jīng)配置成功！

4、把昨天開發(fā)的微信接口對接系統(tǒng)（更換主機(jī)或服務(wù)器）

① 復(fù)制昨天的api.php文件到dedecms系統(tǒng)目錄下并上傳到BAE服務(wù)器中

② 由于api.php文件位置改變了，所以微信服務(wù)器中也需要調(diào)整接口地址，又由于api.php文件中的valid驗證接口已被注釋，所以想重新驗證必須開啟valid驗證接口，如下圖所示：

③ 在微信公眾平臺，重新設(shè)置鏈接地址

④ 設(shè)置完成后，必須注釋掉valid方法，如下圖所示：

重新通過SVN提交到BAE云平臺，使用微信驗證是否成功

七、微信的自定義菜單

1、微信自定義菜單（創(chuàng)建）

在實際項目開發(fā)中，個人建議：二級菜單不要超過3個

2、微信自定義菜單接口分析

由上圖可知，如果想創(chuàng)建自定義菜單必須有一個前提：需要ACCESS_TOKEN

3、ACCESS_TOKEN

在開發(fā)中，如果獲取ACCESS_TOKEN密鑰：

以上接口調(diào)用方式非常簡單，只需要提供兩個參數(shù)appid與secret，這兩個選項可以在以下位置獲取：（基本配置選項下方）

使用get請求獲取access_token，效果如下圖所示：

4、創(chuàng)建自定義菜單

通過自定義菜單的創(chuàng)建接口+access_token實現(xiàn)自定義菜單的創(chuàng)建（curl支持）

curl如何模擬post請求四步走：

1）初始化curl句柄

2）設(shè)置curl

3）執(zhí)行curl

4）關(guān)閉curl

例1：使用curl抓取百度頁面

例2：使用curl+access+token+微信接口實現(xiàn)自定義菜單的創(chuàng)建

當(dāng)我們第一次運行時，系統(tǒng)會自動彈出如下錯誤：

SSL證書錯誤：

當(dāng)正常請求時，當(dāng)我們訪問服務(wù)器時，系統(tǒng)會自動進(jìn)行證書校檢，這個證書可以在瀏覽器端訪問到，但是如果你采用的是模擬訪問的方式，則找不到此證書，所以以上程序會報錯。那如何解決以上問題呢？

答：可以使用curl禁止服務(wù)器端校檢SSL證書，只需要在設(shè)置curl中，添加以下兩行代碼即可：

再次請求，結(jié)果如下圖所示：

特別注意：菜單創(chuàng)建成功后，微信端無法馬上生效，因為微信具有緩存，必須等待24小時才可以生效，我們可以通過取消關(guān)注并再次關(guān)注微信賬號來達(dá)到更新的目的。

5、根據(jù)以上菜單創(chuàng)建項目菜單（微網(wǎng)站、產(chǎn)品中心、聯(lián)系我們）

說明：type:view，代表跳轉(zhuǎn)鏈接，可以跳轉(zhuǎn)到指定的url頁面

type:click，代表單擊按鈕，代表向微信服務(wù)器發(fā)送請求（api.php接口）

對于我們很多小伙伴使用的都是訂閱號，其默認(rèn)沒有自定義菜單怎么辦呢？

答：可以使用官方提供的測試賬號

6、自定義菜單的事件推送功能

自定義菜單的推送事件對于微信公眾平臺而言是一個接收過程，所以可以通過接收接口來實現(xiàn)判斷用戶單擊了哪個按鈕：

① 定義兩個變量$event與$key用于接收Event與EventKey節(jié)點

② 在接收類型中，判斷用戶請求

設(shè)置完成后，通過SVN上傳，測試結(jié)果：

八、微信與MySQL數(shù)據(jù)庫

設(shè)置完成后，通過SVN上傳代碼到BAE云平臺

九、關(guān)注回復(fù)接口

當(dāng)我們關(guān)注微信公眾賬號時，系統(tǒng)會自動返回一條信息，那么這個就是關(guān)注回復(fù)接口。

分析關(guān)注回復(fù)接口XML文本：

通過以上代碼分析可知，如果用戶發(fā)送的節(jié)點信息包含MsgType為event且Event=subscribe代表用戶單擊是關(guān)注按鈕。

測試結(jié)果：

總結(jié)

以上是生活随笔為你收集整理的响应式设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。