# 有響應的布局助手 ## 媒體查詢助手類 Media Query Helper Classes Jquery Mobile給html元素增加了用來模擬瀏覽器的水平豎直方向以及常用的最?最大寬度css媒介查詢class.這些class會在加載，調整大小以及方向變化時更新，使你能夠在css中切斷這些class，以創建有響應的布局，即使在不支持媒介查詢的瀏覽器中也可以實現 ## 方向類 Orientation Classes 取決于瀏覽器或者設備的方向，HTML元素總是會有"portrait"(豎屏) "landscape"(橫屏) class. 你可以在css中如下使用它們: ``` .portrait { /* 垂直方向的變化的代碼 */ } .landscape { /* 水平方向的變化的代碼 */ } ``` ## 最小/最大寬度折斷點Class Min/Max Width Breakpoint Classes 默認情況下， 我們為如下寬度創建了折斷： 320，80，68，024\. 這些寬度對應著如同這樣的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; } ``` ## 添加寬度折斷點 Adding Width Breakpoints 要利用你自己的寬度折斷點。Jquery Mobile公開$.mobile.addResolutionBreakpoints 函數，該函數接受一個數字或者數字的數組，這些值無論何時在函數被應用到時會被添加到min/max折斷點中. ``` //添加一個1200像素的最大/最小折斷點 $.mobile.addResolutionBreakpoints(1200); ///添加一個1200像素和1400像素2個最大/最小折斷點 $.mobile.addResolutionBreakpoints([1200,1440]); ``` ## Running Media Queries 運行媒介查詢 Jquery Mobile 提供一個函數允許你來測試是否有特殊的css 媒介查詢生效，只需調用 $.mobile.media()然后傳遞一個media type 或 query即可.如果瀏覽器支持你傳遞的那種type或query，它會立即生效，函數會返回true，否則會返回false. ``` //測試屏幕媒體類型 $.mobile.media("screen"); //測試最小寬度的媒介查詢 $.mobile.media("screen and (min-width: 480px)"); //測試是否為蘋果4代手機的屏幕（視網膜） $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)"); ```