媒介查询帮助类(media queries)
方向class(Orientation Classes)
HTML元素总是会有"portrait"(竖屏) 或 "landscape"(横屏) class，它们取决于浏览器或者设备的方向. 你可以在css中如下使用它们 :
.portrait {
/* portrait orientation changes go here! */
}
.landscape {
/* landscape orientation changes go here! */
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
许多jQuery Mobile插件会影响 宽度折断点.举例来说，当浏览器宽度在480以上时，表单元素会浮动在label的旁边. 这些CSS在为表单文本框支持这样的行为时看起来像这样:
label.ui-input-text {
display: block;
}
.min-width-480px label.ui-input-text {
display: inline-block;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
添加宽度折断点
要配置你自己的宽度折断点， 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]);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
运行媒介查询
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)");
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
