有响应的布局助手

媒体查询助手类 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)");