《jQuery Mobile快速入门》—— 1.5 响应式设计

.本节书摘来异步社区《jQuery Mobile快速入门》一书中的第1章，第1.5节，作者：【美】Brad Broulik，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5　响应式设计

jQuery Mobile快速入门
jQuery Mobile UI可以根据不同的显示尺寸来呈现。例如，同一个UI会恰如其分地显示在手机（见图1-9）或更大的设备上，比如平板电脑、台式机或电视（见图1-10）。

1.5.1 一次构建，随处运行

有没有可能构建一个可用于所有消费者（手机、台式机和平板电脑）的应用程序呢？是的，这完全有可能。Web提供了一个通用的分发方式。jQuery Mobile提供了跨浏览器的支持。例如，在较小的设备上我们可以使用带有简要内容的小图片，而在较大的设备上我们则可以使用带有详细内容的较大图片。如今，具有移动呈现功能（mobile presence）的大多数系统通常都支持桌面式Web和移动站点。在任何时候，只要你必须支持一个应用程序的多个分发版本，就会造成浪费。系统根据自己的需要“支持”移动呈现，以避免浪费的速率，会促成“一次构建、随处运行”的神话得以实现。

响应式表单
在某些情况下，jQuery Mobile可以为用户创建响应式设计。下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏（portrait）模式和横屏（landscape）模式中的表单字段。例如，在竖屏视图中（见图1-11），标签位于表单字段的上面。而当将设备横屏放置时（见图1-12），表单字段和标签并排显示。这种响应式设计可以基于设备可用的屏幕真实状态提供最合用的体验。jQuery Mobile为用户提供了很多这样优秀的UX（用户体验）操作方法，而且不需要用户付出半分力气。