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

响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。

该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。

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

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

为了实现这样，我们需要自定义一个新的类名称，比如“my-breakpoint”。

这个类用于范围的风格在自定义媒体查询，他们将只适用于当这类添加到网格容器。传媒查询包裹我们只想50em应用以下条件的风格。

在你的媒体查询，使用EM单元代替像素点以确保媒体查询将字体大小考虑除了屏幕宽度。计算在EMS屏幕宽度，将像素的目标宽度的16，这是body的默认字体大小。

HTML5部分：