马扎厂家
免费服务热线

Free service

hotline

010-00000000
马扎厂家
热门搜索:
成功案例
当前位置:首页 > 成功案例

看一看:jQuery Mobile的响应布局

发布时间:2022-04-02 09:33:13 阅读: 来源:马扎厂家
jQuery Mobile的响应布局 作者:filod 2011-07-20 14:11:24 移动开发 jQuery Mobile在为 HTML元素添加class的时候会模拟浏览器的方向和通用的Min/Max width的css媒介查询. 这些class会在 load , resize 和 orientationchange的时候更新拆迁房一楼按什么比例赔,允许你在你的css代码中切断这些class, 以创建 responsive layouts - 即便你的浏览器并不支持媒介查询!

媒介查询帮助类(media queries)

方向class(Orientation Classes)

HTML元素总是会有"portrait"(竖屏) 或 "landscape"(横屏) class,它们取决于浏览器或者设备的方向. 你可以在css中如下使用它们 :

  1. .portrait{
  2. /*portraitorientationchangesgohere!*/
  3. }
  4. .landscape{
  5. /*landscapeorientationchangesgohere!*/
  6. }

Min/Max Width 折断点 Class

默认情况下, 我们为如下宽度创建了折断点: 320,480,768,1024. 这些宽度对应着如同这样的class:"min-width-320px", "max-width-480px"拆迁商户补偿标准, 这意味着这些class可以应用在替换(或附加)它们模拟的等值的媒介查询

  1. .myelement{
  2. float:none;
  3. }
  4. .min-width-480px.myelement{
  5. float:left;
  6. }

许多jQuery Mobile插件会影响 宽度折断点.举例来说,当浏览器宽度在480以上时,表单元素会浮动在label的旁边. 这些CSS在为表单文本框支持这样的行为时看起来像这样:

  1. label.ui-input-text{
  2. display:block;
  3. }
  4. .min-width-480pxlabel.ui-input-text{
  5. display:inline-block;
  6. }

添加宽度折断点

要配置你自己的宽度折断点, jQuery Mobile公开$.mobile.addResolutionBreakpoints 函数, 该函数接受一个数字或者数字的数组,这些值无论何时在生效时都会被添加到min/max折断点中.

  1. //为1200px的宽度添加一个min/maxclass
  2. $.mobile.addResolutionBreakpoints(1200);
  3. //addmin/maxclassesfor1200,and1440pixelwidths
  4. $.mobile.addResolutionBreakpoints([1200,1440]);

运行媒介查询

jQuery Mobile 提供一个函数允许你来测试是否有特殊的css 媒介查询生效,只需调用 $.mobile.media()彬传递一个media type 或 query即可.如果浏览器支持你传递的那种type或query,它会立即生效,函数会返回true,否则会返回false.

  1. //测试screenmediatype
  2. $.mobile.media("screen");
  3. //测试min-widthmediaquery
  4. $.mobile.media("screenand(min-width:480px)");
  5. //测试iOS分辨率
  6. $.mobile.media("screenand(-webkit-min-device-pixel-ratio:2)");