移動前端開發入門（一）

標籤：

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

　　一、媒體查詢：支援不同的視窗

　　基本文法：

@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建立查詢範圍。

　　二、使用流式布局

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

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

　　IE無法調整使用px作為單位的字型的大小。

　　em的特點：

　　1、em的值並不是固定的。

　　2、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" />

 

移動前端開發入門（一）