使用 jQuery Mobile 和 CSS3 实现响应式设计
?
具有较小屏幕分辨率的设备将显示一个类似于?图 2?的并排布局。
图 2. 分辨率较小的设备如何渲染 Web 页面?
?
当然，这是一个极其简单的示例，但它显示了使用 jQuery Mobile 框架和 CSS3 创建一个响应式布局是多么容易。这种可能性令人兴奋，而这仅仅是一个帮助您入门的垫脚石。将几个简单的数据角色属性添加到您的 HTML，您就可以创建 Web 页面的移动版本；通过包括 CSS3 媒体查询，您就可以让您的设计根据屏幕分辨率响应用户的设备。当有人使用桌面计算机查看您的 Web 页面时，您甚至可以修改 jQuery Mobile 的主题，使 Web 页面在更高的分辨率中看起来并不像一个移动的 Web 页面。您需要做的只是使用媒体查询来检查更高的分辨率，然后更改那些 jQuery Mobile 组件的 CSS，基本上覆盖用于创建主题的默认样式。
结束语
响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。jQuery Mobile 框架和 CSS3 的结合，可以创建一套功能强大的布局，您可以用它们来响应每个用户的设备。
下载源码：jquery-mobile-responsive-design.zip
文章出处：IBM developerWorks
