# 有响应的布局助手 ## 媒体查询助手类 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)"); ```