`
caiwb1990
  • 浏览: 314698 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

5.有响应的布局助手 Resonsive Layout Helpers

    博客分类:
  • Jqm
 
阅读更多
媒体查询助手类 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)");





分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics