媒介查詢幫助類(media queries)

方向class(Orientation Classes)

HTML元素總是會有"portrait"(豎屏) 或 "landscape"(橫屏) class，它們取決于瀏覽器或者設備的方向. 你可以在css中如下使用它們 :

.portrait { 
 
/* portrait orientation changes go here! */ 
 
} 
 
.landscape { 
 
/* landscape orientation changes go here! */ 
 
} 

Min/Max Width 折斷點 Class

默認情況下， 我們為如下寬度創建了折斷點: 320，480，768，1024. 這些寬度對應著如同這樣的class:"min-width-320px"， "max-width-480px"， 這意味著這些class可以應用在替換(或附加)它們模擬的等值的媒介查詢

.myelement { 
 
float: none; 
 
} 
 
.min-width-480px .myelement { 
 
float: left; 
 
} 

許多jQuery Mobile插件會影響 寬度折斷點.舉例來說，當瀏覽器寬度在480以上時，表單元素會浮動在label的旁邊. 這些CSS在為表單文本框支持這樣的行為時看起來像這樣:

label.ui-input-text { 
 
display: block; 
 
} 
 
.min-width-480px label.ui-input-text { 
 
display: inline-block; 
 
} 

添加寬度折斷點

要配置你自己的寬度折斷點， jQuery Mobile公開$.mobile.addResolutionBreakpoints 函數， 該函數接受一個數字或者數字的數組，這些值無論何時在生效時都會被添加到min/max折斷點中.

//為1200 px 的寬度添加一個 min/max class 
 
$.mobile.addResolutionBreakpoints(1200); 
 
//add min/max classes for 1200， and 1440 pixel widths 
 
$.mobile.addResolutionBreakpoints([1200， 1440]); 

運行媒介查詢

jQuery Mobile 提供一個函數允許你來測試是否有特殊的css 媒介查詢生效，只需調用 $.mobile.media()彬傳遞一個media type 或 query即可.如果瀏覽器支持你傳遞的那種type或query，它會立即生效，函數會返回true，否則會返回false.

//測試screen media type 
 
$.mobile.media("screen"); 
 
//測試 min-width media query 
 
$.mobile.media("screen and (min-width: 480px)"); 
 
//測試 iOS 分辨率 
 
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");