媒介查詢幫助類(media queries)

方向class(Orientation Classes)

HTML元素總是會(huì)有"portrait"(豎屏) 或 "landscape"(橫屏) class，它們?nèi)Q于瀏覽器或者設(shè)備的方向. 你可以在css中如下使用它們 :

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

Min/Max Width 折斷點(diǎn) Class

默認(rèn)情況下， 我們?yōu)槿缦聦挾葎?chuàng)建了折斷點(diǎn): 320，480，768，1024. 這些寬度對(duì)應(yīng)著如同這樣的class:"min-width-320px"， "max-width-480px"， 這意味著這些class可以應(yīng)用在替換(或附加)它們模擬的等值的媒介查詢

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

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

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

添加寬度折斷點(diǎn)

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

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

運(yùn)行媒介查詢

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

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