前端響應式開發

最近在工做中遇到一些讓人頭疼的問題——多媒體查詢，也就是你們所說的響應式佈局（多終端適配）。在實際的開發過程當中，響應式的設計使得多終端的適配變得很是方便，響應式展示的方式，更有一種組裝變形金剛的感受，但也在實際工做中發現了許多問題：

　　1、開發思惟變得複雜

　　在咱們開發頁面的時候，思惟沒法專一於單一的PC端、移動端以及Pad端，開發每個元素與版塊的時候，都須要考慮多終端適配；因此建議你們在接到這一類項目的時候，不要急於去開發，先把全部的終端頁面設計圖所有瀏覽的看一遍，不僅僅光是看，看的過程當中腦海裏要有響應式開發的思路，不至於到後期花費大量的時間用於修改頁面。

　　2、牽一髮而動全身

　　響應式的設計初衷是一次開發，多終端適配，但在實際的應用中，即便有經過判斷終端類型，而變換頁面內容甚至隱藏的方式，也沒法應對用戶所提出的多終端之間的各類要求，並且每次須要修改一個頁面的元素或者局部板塊時，對於其餘終端頁面的影響都會使人頭疼，由於考慮的內容較多，好比瀏覽器版本對於新技術的支持程度、不一樣版本間的BUG兼容、使用場景、屏幕的大小變化等等，顧忌太多，牽一髮而動全身的特性無疑爲後期維護增長了難度。

　　3、文件體積偏大
　　有時候爲了適配多終端、多版本瀏覽器之間的兼容問題，須要爲不一樣終端寫不一樣的代碼段，但若是經過一個頁面知足多終端的個性化需求，這個頁面的代碼體積無疑是很是大的，對於PC端還好說，對於流量昂貴的移動終端這無疑是致命的。

說了這麼多問題，咱們爲何還要用響應式，響應式也有幾個優勢：

1. 工做量少，網站、代碼、內容只須要一份，多出來的工做量只是JavaScript腳本、CSS樣式；
2. 每一個設備都能獲得正確的設計；
3. 搜索優化；
4. 數據調用簡單；

下面說一下響應式開發都須要作些什麼：

 第一步：Meta標籤 (容許網頁寬度自動調整)

　　<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

（全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE六、七、8），須要使用css3-mediaqueries.js。）
　　or
（ie8以及更早的瀏覽器不支持Media Query
可使用media-queries.js或者respond.js來爲IE添加Media Query支持）

 

第二步：HTML結構

注意：儘可能不使用絕對寬度
因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素；
2）相對字體大小
字體能夠不使用絕對大小（px），使用相對大小（em）。
body {
    font: normal 100% Helvetica, Arial, sans-serif;
}

第三步：媒介查詢（css3 Media Query 媒介查詢）

　　方法一：
　　@media screen and (max-width:1000px){
  　　 content:{width:100%;}
　　}

　　方法二：

　　<link rel="stylesheet" media="screen and (max-width:640px)" href="">

 

媒體查詢能檢測的特性：

width : 視口寬度
height : 視口高度
device-width ：設備屏幕寬度
device-height : 設備屏幕高度orientation : 檢查設備處於橫向仍是縱向
aspect-ratio : 視口寬度和高度的寬高比，例如：一個16：9比例的顯示屏能夠這樣定義aspect-ratio : 16/9;
device-aspect-ratio : 設備屏幕寬度和高度的寬高比；
color : 每種顏色的位數，例如min-color:16會檢測設備是否擁有16位顏色；
color-index ：設備的顏色索引表中的顏色數，值必須是非負數的；
monochrome : 檢測單色幀緩衝區中每像素所使用的位數，值必須是非負數的，例如：monochrome : 2;
resolution : 用來檢測屏幕或打印機的分辨率，如min-resolution : 300dpi，每釐米像素點數的度量值，如min-resolution : 118dpcm;
scan : 電視機的掃描方式，值可設爲progressive（逐行掃描）或者interlace（隔行掃描），如720p HD 電視（720p的p表示逐行掃描）,scan : progressive，而1080i HD 電視的i表示隔行掃描，匹配scan : interlace ; grid : 用來檢測輸出設備是網格設備仍是位圖設備;

 

屏幕尺寸響應　　1.固定佈局　　2.流動佈局　　3.自定義佈局　　4.柵格佈局　　分辨率：預設的分辨率有（可切換橫版，豎版）　　普通智能手機：320×480　　iPhone5：320×568　　普通平板：800×600　　iPad二、三、mini：768×1024　　寬屏電腦：1280×800　　HDTV：1920×1080