Responsive Web Design 響應式網頁設計

Responsive Web Design 響應式網頁設計

1、常見的佈局方案

固定佈局： 以畫素作為頁面的基本單位，不管裝置螢幕及瀏覽器寬度，只設計一套尺寸；

可切換的固定佈局： 同樣以畫素作為頁面單位，參考主流裝置尺寸，設計幾套不同寬度的佈局。透過識別的螢幕尺寸或瀏覽器寬度，選擇最合適的那套寬度佈局；

彈性佈局： 以百分比作為頁面的基本單位，可以適應一定範圍內所有尺寸的裝置螢幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果；

混合佈局： 同彈性佈局類似，可以適應一定範圍內所有尺寸的裝置螢幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果；只是混合畫素、和百分比兩種單位作為頁面單位。

佈局響應： 對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的佈局設計，有兩種方式：pc優先（從pc端開始向下設計）；
移動優先（從移動端向上設計）；
無論基於那種模式的設計，要相容所有裝置，佈局響應時不可避免地需要對模組佈局做一些變化（發生佈局改變的臨界點稱之為斷點），

2、響應式佈局方案

（1）模組中內容：擠壓－拉（佈局不變）

 

（2）模組中內容：換行－平鋪（佈局不變）

 

（3）模組中內容：刪減－增加（佈局不變）

 

（4）模組位置變換（佈局改變）

 

（5）模組展示方式改變：隱藏－展開（佈局改變）

 

（6）模組數量改變：刪減－增加（佈局改變）

 

3、響應式佈局特點

設計特點：
面對不同解析度裝置靈活性強 
能夠快捷解決多裝置顯示適應問題
缺點：
相容各種裝置工作量大，效率低下
程式碼累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況

4.Meta標籤的設定

準備工作：設定Meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gr;
這段程式碼的幾個引數解釋：
width = device-width：寬度等於當前裝置的寬度
initial-scale： 初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 <meta name="viewport"   content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略將頁面中的數字識別為電話號碼 <meta name="format-detection" content="telephone=no" /> 忽略Android平臺中對郵箱地址的識別 <meta name="format-detection" content="email=no" /> 當網站新增到主螢幕快速啟動方式，可隱藏位址列，僅針對ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以後，safari上已看不到效果 --> 將網站新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->