jQuery Mobile的響應布局
作者：filod
jQuery Mobile在為 HTML元素添加class的時候會模擬瀏覽器的方向和通用的Min/Max width的css媒介查詢. 這些class會在 load ， resize 和 orientationchange的時候更新，允許你在你的css代碼中切斷這些class， 以創建 responsive layouts - 即便你的瀏覽器并不支持媒介查詢!
媒介查詢幫助類(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)");
責任編輯：佚名
來源：
filod
