简要了解jQuery移动web开发的响应布局设计

响应式布局设计是根据用户设备的屏幕分辨率对其做出响应的设计。这意味着无论用户是在移动、平板还是桌面设备上浏览网页，设计都会根据设备的屏幕分辨率显示特定的布局，从而对设备做出适当的响应。

事实上，这个框架的文档结合了jQuery Mobile框架和CSS3媒体查询，实现了自己的响应设计。如何应对不同的屏幕分辨率？

如果没有自定义样式，我们的电网将在所有屏幕宽度上布置3列：

在我们的自定义样式中，我们希望这个网格以窄宽度叠加，然后切换到标准的3列布局。在宽屏幕宽度中，我们希望第一列占据50%的宽度，因此：

为了实现这一点，我们需要定制一个新的类名，比如“my-断点”。此类用于自定义媒体查询中的范围样式，并且它们仅在此类添加到网格容器时适用。我们只希望50em在通过媒体查询包裹时应用以下条件的样式。在您的媒体查询中，使用EM单位而不是像素，以确保除了媒体查询中的屏幕宽度之外，还考虑了字体大小。在EMS中计算屏幕宽度，将像素的目标宽度设置为16，这是正文的默认字体大小。

HTML5部分：

div class=' ui-grid-B my-断点' div class=' ui-block-A ' block A/div class=' ui-block-B ' block B/div class=' ui-block-C ' block C/div/div！- /grid-b - CSS3零件：

@ media all and(max-width : 50 em){。我的断点。ui-block-a，我的断点。ui-block-b，我的断点。ui-block-c，我的断点。ui块d。我的断点。ui-block-e { width : 100%；float:none}}在这个媒体查询中，我们将宽度设置为100%并拒绝浮动属性，屏幕宽度为50em。这些规则适用于从堆叠选择器网格的所有类ui-block-a到ui-block-e的每种网格类型的样式。那就是让网格做出响应并添加额外的样式规则，并且更容易更改每个断点。我们鼓励您创建多个自定义断点，这是您根据自己独特的内容和布局所需要的。

添加宽屏断点调整比率。

基于上面的例子，我们可以添加一个额外的断点，使第一列的宽度为50%，另外两个25%或更多的75em(1200像素)可以通过额外的最小宽度媒体查询来调整。这是自定义样式：

@ media all and(min-width : 75 em){。my-断点. ui-grid-b . ui-block-a { width : 49.95%；} .my-断点. ui-网格-b . ui-块-b，my-断点. ui-grid-b . ui-block-c { width : 24.925%；} .my-断点. ui-grid-b . ui-block-a { clear : left；}}}注意：稍微窄一点的宽度设置是为了解决跨平台的舍入问题。

应用自定义断点用户界面响应

使用这个预设断点，将ui响应类添加到网格容器中，并将堆栈呈现为下面的560px(35em)。如果这个断点的工作不适合您的内容，我们鼓励您按照上面的描述编写一个自定义断点。

Class=' ui-grid-b ui-responsive '这些是标准网格，是ui-responsive的响应类网格容器(接口反应，自定义类，比如上面例子中的my-断点)。

示例：

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title responsive-grid demo/title link rel='样式表href=' http://代码。jquery。com/mobile/1。3 .0/jquery。移动一号。3 .0 .量滴CSS ' script src=' http 3360http://代码。jquery。com/jquery-1。9。-下面的脚本可以省略-script src=' http :/resources/turnoffpushstate。js '/script script src=' http :3358代码。jquery。com/mobile/1。3 .0/jquery。移动一号。3 .0 .量滴js '/script style @ media all and(最大宽度： 35 em){ .我的断点ui-block-a .我的断点ui-block-b .我的断点ui-block-c .我的断点ui .块d .我的断点ui-block-e {宽度： 100%；float:none} } @ media all and(最小宽度： 45em){ .表示“肌肉的”断点。ui-grid-b . ui-block-a {宽度： 49.95%；} .表示“肌肉的”断点。用户界面网格b . ui-块b .表示“肌肉的”断点。ui-grid-b . ui-block-c { width : 24.925%；} }/style/head body div数据-角色=' page ' div数据-角色=' header ' h1响应网格示例/h1/div数据-角色='内容' div class=' ui-Grid-B my-断点div class=' ui-block-A ' div class=' ui-body ui-body-body-d ' block B/div/div class=' ui-block-C ' div class=' ui-block