移動前端開發入門（一）

　　響應式佈局定義：將彈性網格佈局、彈性圖片、媒體和媒體查詢整合起來，即爲響應式佈局。

　　1、媒體查詢：支持不一樣的窗口

　　基本語法：

@media screen and    (max-width:960px){
    body{
         background-color:red;    
     }
}

　　使用@inport指令能夠在當前樣式表中按條件引入其餘樣式表。以下例：

@inport url("phone.css") screen and (max-width:768px);

　　可是須要注意的是使用@inport方式會增長HTTP請求

　　媒體查詢可以檢測的性能有：

　　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:檢測單色幀緩衝區中每像素使用位數，必須非負整數

　　resolution:檢測屏幕或打印機分辨率

　　scan:電視機的掃描方式，值可爲，progresssive（逐行掃描），interlace（隔行掃描）

　　grid:檢測輸出設備是網絡設備仍是位圖設備

　　注：上述特性，除scan和grid外，可用min和max建立查詢範圍。

　　2、使用流式佈局

　　目標元素寬度 / 上下文元素寬度 = 百分比寬度

　　在響應式佈局中，要放棄使用px，使用em。

　　IE沒法調整使用px做爲單位的字體的大小。

　　em的特色：

　　一、em的值並非固定的。

　　二、em會繼承父級元素的字體大小。

　　rem，也是相對單位：

　　是相對於HTML的根元素，而不是父元素。

　　彈性圖片：

　　能夠給圖片都加上屬性,即爲圖片設置閾值： 

　　   img{max-width:100%;}   或   img{max-width:220px;}

　　max-width屬性：

　　能夠給元素加上max-width屬性，以限制該元素的最大寬度。

　　viewport特性，是一個移動專屬的Meta值，用於定義視口的各類行爲。

   　　 layout viewport：佈局視口

　　在iOS Safari中定義了一個viewport meta標籤，用來建立一個虛擬的佈局視口，這個視口的分辨率接近PC。

  　　  visual viewport：視覺視口

　　手持設備物理屏幕的可視區域，即視覺視口。

 　　   ideal viewport：完美視口

　　完美視口。不用縮放或拖動網頁就能很好的進行網頁瀏覽。

　　    viewport特性： 

　　   width：

　　width被用來定義layout viewport的寬度，若是不指定該屬性（或者移除viewport meta標籤），則layout viewport寬度爲廠商默認值。

<meta name="viewport" content="width=device-width" />

　　此時的layout viewport將成爲ideal viewport，由於layout viewport寬度與設備視覺視口寬度一致了。

  　　  height：

　　與width相似，但實際上卻不經常使用，由於沒有太多的use case。

　　    initial-scale：

　　若是想頁面默認以某個比例放大或者縮小而後呈現給用戶，那麼能夠經過定義initial-scale來完成。

　　initial-scale用於指定頁面的初始縮放比例，假定你這樣定義：

<meta name="viewport" content="initial-scale=2" />

　　那麼用戶將會看到2倍大小的頁面內容。

 <meta name="viewport" content="initial-scale=1" />

　　如上initial-scale也能實現ideal viewport。

　　    maximum-scale：

　　在移動端，你可能會考慮用戶瀏覽不便，而後給予用戶放大頁面的權利，但同時又但願是在必定範圍內的放大，這時就可使用maximum-scale來進行約束。

　　maximum-scale用於指定用戶可以放大的比例。

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

　　假設頁面的默認縮放值initial-scale是1，那麼用戶最終可以將頁面放大到這個初始頁面大小的5倍。

 　　   minimum-scale：

　　相似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。一般狀況下，爲了有更好地體驗，不會定義該屬性的值比1更小，由於那樣頁面將變得難以閱讀。

  　　  user-scalable：

　　若是你不想頁面被放大或者縮小，經過定義user-scalable來約束用戶是否能夠經過手勢對頁面進行縮放便可。

　　該屬性的默認值爲yes，便可被縮放（若是使用默認值，該屬性能夠不定義）；固然，若是你的應用不打算讓用戶擁有縮放權限，能夠將該值設置爲no。

　　使用方法以下：

<meta name="viewport" content="user-scalable=no" />