前端之家收集整理的这篇文章主要介绍了
简要了解jQuery移动web开发的响应式布局设计,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。
@H_
403_0@该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体
查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。
@H_
403_0@没有
自定义样式,我们的电网将3列的布局在所有的屏幕宽度:
@H_
403_0@

@H_
403_0@在我们的
自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局。在很宽的屏幕宽度,我们希望第一列占用50%的宽度,这样:
@H_
403_0@

@H_
403_0@为了实现这样,我们需要
自定义一个新的类
名称,比如“my-breakpoint”。
这个类用于范围的风格在
自定义媒体
查询,他们将只适用于当这类
添加到网格容器。传媒
查询包裹我们只想50em应用以下条件的风格。
在你的媒体
查询,使用EM单元代替像素点以确保媒体
查询将字体大小考虑除了屏幕宽度。计算在EMS屏幕宽度,将像素的目标宽度的16,这是body的默认字体大小。
@H_
403_0@HTML5部分:
@H_
403_0@
CSS3部分:
@H_
403_0@在这个媒体
查询,我们设置宽为100%和否定浮动
属性,50em屏幕宽度。这些规则适用于每一个网格类型由堆放选择器网格的所有类ui-block-a到ui-block-e的风格。
那是使网格的响应和
添加额外的样式规则,每个断点改变起来更容易。我们鼓励您创建多个定制的断点,你需要根据你独特的
内容和布局的需要。
@H_
403_0@
添加一个宽屏断点调整比率
@H_
403_0@基于上面的例子,我们可以
添加一个额外的断点将宽度以使第一列的宽度为50%,其他两个25%以上75em(1200像素)由额外的最小宽度媒体
查询来调整宽度在
自定义风格就这样:
@H_
403_0@注意:稍窄的宽度设置为工作在四舍五入问题的跨平台。
@H_
403_0@应用
自定义断点 ui-responsive
@H_
403_0@使用此预设断点,
添加 ui-responsive 类到网格容器,将堆叠呈现以下560px(35em)。如果这个断点的工作不适合你的
内容,我们鼓励你写一个
自定义的断点如上所述。
@H_
403_0@这些都是标准的网格是由 ui-responsive(界面反应,
自定义类,如上例子my-breakpoint)的作出响应类网格容器
@H_
403_0@示例:
<
Meta charset="utf-8">
<
Meta name="viewport" content="width=device-width,initial-scale=1">
responsive-grid demo
<div data-role="page">
<div data-role="header">
Responsive Grid Example