jQuery Mobile 布局

如何在移动设备的小屏幕中呈现你的网站中的所有内容呢?jQuery Mobile 布局插件,可以帮助你创建多视图或者分割视图布局的移动web页面,并会根据移动设备的方向和屏幕大小来动态调整所显示的内容。

响应式布局 响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览Web页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。该框架的文档实际上结合使用了jQueryMobile框架和CSS3媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度:在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局。在很宽的屏幕宽度,我们希望第一列占用50%的宽度,这样:为了实现这样,我们需要自定义一个新的类名称,比如“my-breakpoint”。这个类用于范围的风格在自定义媒体查询,他们将只适用于当这类添加到网格容器。传媒查询包裹我们只想50em应用以下条件的风格。在你的媒体查询,使用EM单元代替像素点以确保媒体查询将字体大小考虑除了屏幕宽度。计算在EMS屏幕宽度,将像素的目标宽度的16,这是body的默认字体大小。HTML5部分:<divclass="ui-grid-bmy-breakpoint"> <divclass="ui-block-a">BlockA</div>

ui-grid 网格布局 在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起。JqueryMobile框架提供了一种简单的方法构建基于css的分栏布局,叫做ui-gridJqueryMobile提供有四个预设的布局,可以在任何情况下都需要列两列(使用ui-grid-a类)三列(使用ui-grid-b类)四列(使用ui-grid-c类)五列(使用ui-grid-d类)网格是100%的宽度,完全看不见的(没有边界或背景)和没有margin或padding,所以他们不会干扰样式的元素放在他们里面。在网格容器,子元素被分配ui-block-a/b/c/d以连续的方式,使每个“块”元素浮动并列,形成网格。其中ui-block-a类基本上清除浮将开始新的一行(见多行的网格,在下面)。ui-grid-a两列布局建立个两列(50/50%)布局,第一层(父容器)添加ui-grid-a属性,第二层(两个子容器)里面分别添加ui-block-a和ui-block-b:<divclass=ui-grid-a"><divclass=ui-block-a><strong>I'mBlockA</stron