媒介查询帮助类(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)");
