Responsive Web Design 響應式網頁設計

Responsive Web Design 響應式網頁設計

一、常見的佈局方案

固定佈局：以像素做爲頁面的基本單位，無論設備屏幕及瀏覽器寬度，只設計一套尺寸；

可切換的固定佈局：一樣以像素做爲頁面單位，參考主流設備尺寸，設計幾套不一樣寬度的佈局。經過識別的屏幕尺寸或瀏覽器寬度，選擇最合適的那套寬度佈局；

彈性佈局：以百分比做爲頁面的基本單位，能夠適應必定範圍內全部尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展示最佳效果；

混合佈局：同彈性佈局相似，能夠適應必定範圍內全部尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展示最佳效果；只是混合像素、和百分比兩種單位做爲頁面單位。

佈局響應：對頁面進行響應式的設計實現，須要對相同內容進行不一樣寬度的佈局設計，有兩種方式：pc優先（從pc端開始向下設計）；
移動優先（從移動端向上設計）；
不管基於那種模式的設計，要兼容全部設備，佈局響應時不可避免地須要對模塊佈局作一些變化（發生佈局改變的臨界點稱之爲斷點），

二、響應式佈局方案

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

 

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

 

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

 

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

 

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

 

（6）模塊數量改變：刪減－增長（佈局改變）

 

三、響應式佈局特色

設計特色：
面對不一樣分辨率設備靈活性強 
可以快捷解決多設備顯示適應問題
缺點：
兼容各類設備工做量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

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 -->