【技術】Media Queries行動裝置樣式

標籤：android   style   color   os   使用   io   檔案   ar   cti   

Viewpoint設定適應行動裝置螢幕大小
（1） viewpoint虛擬視窗的主要作用是允許開發人員建立一個虛擬視窗（viewpoint），並自訂其視窗的大小和縮放功能。
     Mobile safari虛擬視窗預設大小是980像素，android browser預設是800像素，IE預設是974像素，opera是850像素 

（2）使用viewpoint
   在meta元素中定義，其主要作用是設定web頁面適應行動裝置的螢幕大小 <meta name=”viewpoint” content=”width=device-width,initial-scale=1,user-scalable=0”> 該代碼的主要作用是自訂虛擬視窗，並制定虛擬視窗width寬頻為device-width，初始縮放比例大小為1，同時不允許使用者使用手動縮放功能
   Content屬性：width、height、initial-scale、maximum-scale、minimum-scale，user-scalable 

（3）media queries如何工作的

 ① 最大寬頻值是600px時

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

在small.css 樣式內，需要定義media類型的樣式 

@media screen and (max-width:600px){   

　　.demo{
    　　　　Background-color:#ccc; 

　　}

}
②最大寬頻值是600-900px時
<link rel=”stylesheet” media=”screen and (min-width:600) and (max-width:900px)” href=”small.css”>
在small.css 樣式內，需要定義media類型的樣式 

@media”screen and (min-width:600) and (max-width:900px){   

　　.demo{
    　　　Background-color:#ccc; 

　　} 

}
③最大寬頻值是480px時(手機)
<link rel=”stylesheet” media=”screen and (max-device-width:480px)” href=”small.css”> 

在small.css 樣式內，需要定義media類型的樣式 

@media”screen and (max-device-width:480px){  

　　 .demo{
    　　　　Background-color:#ccc; 

　　} 

} 
判斷當行動裝置（如ipad）的方向發生變化時應用該樣式。

當行動裝置處於縱向portrait模式下時，應用portrait樣式檔案；當行動裝置處於橫向landscape模式下時，應用landscape樣式檔案。
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=” portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=” landscape.css”> 

④ Media Queries 文法總結
@media [media_query] media_type and media_feature

Media_query 查詢關鍵字，可以使用not、only。Not取反，only讓不支援media queries的裝置但能讀取media type類型的瀏覽器忽略這個樣式。
Media_type 指定裝置類型（即媒體類型），共10種裝置類型  

●all 所有裝置
●screen 顯示器、筆記本、移動終端等裝置
●aural、braille、 handled、 print 、projection、 tty、 tv、 embossed

Media_feature 定義css中的裝置特性，大部分行動裝置特性都允許接受min、max的首碼

● Width、 height
●Device_width、 device_height

● Orientation

● Aspect_raido

● Resolution

● ……
 
IE8 以下版本不支援media queries

 

【技術】Media Queries行動裝置樣式