一、響應式設計概述

1、未來網頁流行區域

隨著3G、4G的普及，越來越多的人使用手機上網。

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

2、早期解決方案

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

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

3、解決方案

于是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）？

4、自使用網頁設計

2010年，Ethan Marcotte提出了"自適應網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計。

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

超寬屏幕PC端：

純屏PC端：

平板計算機：

手機端：

5、響應式設計核心原理（有舍有得）

二、響應式設計核心

1、DW（Dreamweaver CC）設計軟件的使用

2、響應式核心標簽viewport

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

3、不使用絕對寬度

由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。

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

如：xxx px;

只能指定百分比寬度：

如： xx%;

4、使用相對大小的字體

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

rem是相對于網頁根元素的文字大小，默認html標簽的文字大小為16px，1rem = 16px

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

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

h1 {
　　font-size: 1.5rem;
}

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

small {
　　font-size: 0.875rem;
}

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

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

答：可以人為設計html標簽的文字大小

html {

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

}

html元素的文字大小為10px，根據rem的設定規則，其1rem = 10px，以后換算時：

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

5、媒體查詢標簽（重點）

"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然后加載相應的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、讓多媒體標簽實現自適應

除了布局和文本，"自適應網頁設計"還必須實現多媒體的自動縮放。

img { max- 100%;}

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

三、響應式案例

1、讓網頁可以識別設別的寬度

2、使用media query標簽實現根據不同的寬度加載不同的css

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

手機端：最大寬度小于767px

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

PC端：最小寬度大于1024px

3、讓網頁可以自動去適應終端的寬度，

為了讓網頁自動去適應屏幕的寬度，可以在整個內容的最外層為其添加一個div元素

4、初始化CSS代碼

5、設計Logo導航條

6、設計相關板塊

詳細代碼參考css/phone.css，內容如下：

四、Font Awesome矢量圖標集

我們在實際項目開發中，經常會使用小圖標的功能，在早期都是采用PS等設計軟件進行設計開發的，但是在現在大家可以使用Bootstrap框架中內置的矢量圖標集來實現網頁中的小圖標——Font Awesome矢量圖標集

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

2、使用link標簽引入font-awesom.min.css

3、在網頁的合適位置，設計HTML與CSS代碼

4、使用Font Awesome矢量圖標集

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

效果如下：

擴展：撥打電話與發送短信功能（html5標簽）

五、十分鐘搞定Javascript特效

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

這款插件是由動易現設計師——大話主席設計開發的基于jQuery的一款Javascript特效庫。

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

1、設計網頁中的html與css代碼

2、為元素添加.hd與.bd標簽

使用SuperSlider2有一個前提：必須在標簽中包含了兩個class=hd（控制條）與class=bd（內容區）的div標簽

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

把以上代碼復制放到剛才html標簽的最低端即可，如下圖所示：

六、綜合案例：整合微信與響應式

1、項目需求

① 可以在先瀏覽器響應式網站，還需要提供數據庫的支持

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

微網站：點擊這個鏈接，可以跳轉到響應式網站的首頁

產品中心：點擊產品中心連接，可以以圖文信息的形式返回數據庫中最新的5個產品

聯系我們：以文本形式顯示公司的聯系信息

③ 當用戶關注我們的微信公眾賬號時，可以實時返回一條圖文信息，引導用戶進入微站

2、搭建dedecms系統到BAE云平臺

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

3、讓BAE提供BAE的支持

1）單擊BAE平臺中的擴展服務

2）添加新服務（MySQL）

3）選擇MySQL套餐

4）創建完成后，效果如下圖所示

5）使用phpmyadmin導入數據到數據庫

6）設置dedecms系統的配置文件，連接MySQL數據庫

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

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

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

設置完成后，通過SVN軟件上傳到服務器端。

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

如果出現如上界面代表已經配置成功！

4、把昨天開發的微信接口對接系統（更換主機或服務器）

① 復制昨天的api.php文件到dedecms系統目錄下并上傳到BAE服務器中

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

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

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

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

七、微信的自定義菜單

1、微信自定義菜單（創建）

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

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

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

3、ACCESS_TOKEN

在開發中，如果獲取ACCESS_TOKEN密鑰：

以上接口調用方式非常簡單，只需要提供兩個參數appid與secret，這兩個選項可以在以下位置獲?。海ɑ九渲眠x項下方）

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

4、創建自定義菜單

通過自定義菜單的創建接口+access_token實現自定義菜單的創建（curl支持）

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

1）初始化curl句柄

2）設置curl

3）執行curl

4）關閉curl

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

例2：使用curl+access+token+微信接口實現自定義菜單的創建

當我們第一次運行時，系統會自動彈出如下錯誤：

SSL證書錯誤：

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

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

再次請求，結果如下圖所示：

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

5、根據以上菜單創建項目菜單（微網站、產品中心、聯系我們）

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

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

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

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

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

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

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

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

設置完成后，通過SVN上傳，測試結果：

八、微信與MySQL數據庫

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

九、關注回復接口

當我們關注微信公眾賬號時，系統會自動返回一條信息，那么這個就是關注回復接口。

分析關注回復接口XML文本：

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

測試結果：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。