CSS3系列四（Media Queries行動裝置樣式）

標籤：

viewport設定適應行動裝置螢幕大小 

viewport：允許開發人員建立一個虛擬視窗並自訂其視窗的大小或縮放功能

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

代碼中的content屬性可以設定如下6種不同參數

Media Queries如何工作

1、定義當前螢幕可視地區的寬度最大值是600像素

<link href="small.css" rel="stylesheet"  media="screen and(max-width:600px)"/>

那麼small.css怎樣寫的呢

@media screen and (max-width:600px) {    .demo {        background-color:red;    }}

2、定義當前螢幕可視地區的寬度長度在600到900像素之間

<link href="small.css" rel="stylesheet"  media="screen and(min-width:600px) and(max-width:900px)"/>

@media screen and (min-width:600px) and (max-width:900px) {    .demo {        background-color: red;    }}

3、當移動螢幕處於縱向（portrait）模式下時，應用portrait樣式檔案，當行動裝置處於橫向（landscape）模式下，應用landscape樣式檔案

    <link href="protrait.css" rel="stylesheet"  media="all and(orientation:portrait)"/>    <link href="landscape.css" rel="stylesheet"  media="all and(orientation:landscape)"/>

 

Media Queries文法總結

文法格式如所示：

1、使用Media Queries樣式模組時都必須以“@media”方式開頭

2、media_query表示查詢關鍵定，比如說not only and 等等

• 　　not表示對後面的樣式表達式執行取反操作
• 　　only讓不支援Media Queries的裝置但能讀取Media Type類型的瀏覽器忽略這個樣式，對於支援Media Queries的行動裝置來說，如果存在only關鍵字，行動裝置的瀏覽器會忽略only關鍵字並直接根據頁面的運算式應用樣式 檔案

3、media_type 指定裝置類型（也稱媒體類型）

4、media_feature定義css中的裝置特徵　　

media_type裝置類型一覽表

media_feature裝置特徵一覽表

大部分裝置特徵都允許接受min/max的首碼

CSS3系列四（Media Queries行動裝置樣式）