![pageTwo]( "pageTwo")
Its simple enough, like @Omar said, first of all use a single page template like this with 'data-role=page' denoting each page.<body> <div data-role="page" data-theme="d" id="pageOne"> <---header----> <--- content ---> <---footer----> </div> <div data-role="page" data-theme="d" id="pageTwo"> <---header----> <--- content ---> <---footer----> </div>现在，Jquery mobile将在首次加载时自动显示"pageOne"并隐藏"pageTwo"，并在导航到"pagetwo"时将隐藏"pageOne".Now, Jquery mobile will automatically show 'pageOne' on first load and hide 'pageTwo' and on navigating to 'pagetwo' will hide 'pageOne'.此后，您可以编写类似于以下内容的CSS媒体查询:After this you can write a css media query similar to this:@media all and (min-width: 450px) { #pageOne{ display:block; float: left; width:50%; postion:relative; } #pagetwo{ display:inline-block; float:right; width:50%; padding-left: 2em; postion:relative; }}因此，如果宽度大于上述宽度(450像素)的任何两个页面都将并排显示.希望这可以帮助.这是我制作的一个简单的工作示例.So if any with width greater than the mentioned width(450px) will have both the pages displayed side by side. Hope this helps. Here is a simple working sample I made. http://jsfiddle.net/uwZpM/ 这篇关于在JQuery Mobile上将页面合二为一的响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-24 21:29