響應式設計

1、響應式設計概述

一、將來網頁流行區域

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

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

二、早期解決方案

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

 

不少網站的解決方法，是爲不一樣的設備提供不一樣的網頁，好比專門提供一個mobile版本，或者iPhone / iPad版本。這樣作當然保證了效果，可是比較麻煩，同時要維護好幾個版本，並且若是一個網站有多個portal（入口），會大大增長架構設計的複雜度。

三、解決方案

因而，很早就有人設想，能不能"一次設計，廣泛適用"，讓同一張網頁自動適應不一樣大小的屏幕，根據屏幕寬度，自動調整佈局（layout）？

四、自使用網頁設計

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

 

他製做了一個範例，裏面是《福爾摩斯歷險記》六個主人公的頭像。若是屏幕寬度大於1300像素，則6張圖片並排在一行。

超寬屏幕PC端：

純屏PC端：

平板計算機：

手機端：

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

2、響應式設計核心

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

二、響應式核心標籤viewport

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

三、不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要。

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

如：width:xxx px;

只能指定百分比寬度：

如：width: xx%;

四、使用相對大小的字體

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

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

五、媒體查詢標籤（重點）

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

它的意思就是，自動探測屏幕寬度，而後加載相應的CSS文件。

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

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

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

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

六、讓多媒體標籤實現自適應

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

img { max-width: 100%;}

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

3、響應式案例

一、讓網頁能夠識別設別的寬度

二、使用media query標籤實現根據不一樣的寬度加載不一樣的css

實際項目開發中，通常是分爲三部分：

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

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

PC端：最小寬度大於1024px

三、讓網頁能夠自動去適應終端的寬度，

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

四、初始化CSS代碼

五、設計Logo導航條

六、設計相關板塊

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

 

4、Font Awesome矢量圖標集

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

一、複製css與fonts文件夾到項目目錄中並保持路徑一致

二、使用link標籤引入font-awesom.min.css

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

四、使用Font Awesome矢量圖標集

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

效果以下：

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

5、十分鐘搞定Javascript特效

咱們在實際項目開發中，常常會使用特效功能，可是對於咱們的JS的要求會比較高，若是想在實際項目開發中，高效的完成Javascript特效不妨考慮使用SuperSlider2插件。

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

 

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

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

二、爲元素添加.hd與.bd標籤

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

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

把以上代碼複製放到剛纔html標籤的最低端便可，以下圖所示：

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

一、項目需求

① 能夠在先瀏覽器響應式網站，還須要提供數據庫的支持

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

微網站：點擊這個連接，能夠跳轉到響應式網站的首頁

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

聯繫咱們：以文本形式顯示公司的聯繫信息

③ 當用戶關注咱們的微信公衆帳號時，能夠實時返回一條圖文信息，引導用戶進入微站

二、搭建dedecms系統到BAE雲平臺

使用SVN上傳dedecms系統源代碼到百度的BAE雲平臺，上傳完畢後，咱們能夠直接預覽效果，可是其並無數據庫的支持。

三、讓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

若是出現如上界面表明已經配置成功！

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

① 複製昨天的api.php文件到dedecms系統目錄下並上傳到BAE服務器中

② 因爲api.php文件位置改變了，因此微信服務器中也須要調整接口地址，又因爲api.php文件中的valid驗證接口已被註釋，因此想從新驗證必須開啓valid驗證接口，以下圖所示：

③ 在微信公衆平臺，從新設置連接地址

④ 設置完成後，必須註釋掉valid方法，以下圖所示：

從新經過SVN提交到BAE雲平臺，使用微信驗證是否成功

7、微信的自定義菜單

一、微信自定義菜單（建立）

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

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

由上圖可知，若是想建立自定義菜單必須有一個前提：須要ACCESS_TOKEN

三、ACCESS_TOKEN

在開發中，若是獲取ACCESS_TOKEN密鑰：

以上接口調用方式很是簡單，只須要提供兩個參數appid與secret，這兩個選項能夠在如下位置獲取：（基本配置選項下方）

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

四、建立自定義菜單

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

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

1）初始化curl句柄

2）設置curl

3）執行curl

4）關閉curl

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

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

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

SSL證書錯誤：

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

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

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

特別注意：菜單建立成功後，微信端沒法立刻生效，由於微信具備緩存，必須等待24小時才能夠生效，咱們能夠經過取消關注並再次關注微信帳號來達到更新的目的。

五、根據以上菜單建立項目菜單（微網站、產品中心、聯繫咱們）

說明：type:view，表明跳轉連接，能夠跳轉到指定的url頁面

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

對於咱們不少小夥伴使用的都是訂閱號，其默認沒有自定義菜單怎麼辦呢？

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

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

自定義菜單的推送事件對於微信公衆平臺而言是一個接收過程，因此能夠經過接收接口來實現判斷用戶單擊了哪一個按鈕：

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

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

設置完成後，經過SVN上傳，測試結果：

8、微信與MySQL數據庫

設置完成後，經過SVN上傳代碼到BAE雲平臺

9、關注回覆接口

當咱們關注微信公衆帳號時，系統會自動返回一條信息，那麼這個就是關注回覆接口。

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

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

測試結果：