JQuery Mobile：并排/下方放置元素-取决于平台

Question

我目前正在使用JQuery Mobile。 我的想法是创建一个显示各种数量列表的页面（至少一个，最大数量为〜10）。

将它们放在页面上时，列表将填满整个水平空间。 然后将它们放置在彼此下方。

在较小的电话屏幕上打开页面时，这很好，但在屏幕尺寸较大的设备（平板电脑，台式机浏览器）上看起来不佳。 当然，我可以使用网格将它们并排放置，但这会导致小屏幕设备的设计不佳。

最好的情况是，我在“桌面浏览器”中打开页面，更改页面大小，然后列表根据屏幕大小自行替换。 在电话显示器上，它们将始终置于彼此下方。

是否可以根据屏幕尺寸自动显示列表？

还请记住，我并不总是知道用户将创建多少个列表。

Answer 1

这是一个工作示例： http : //jsfiddle.net/Gajotres/Yz3nS/

由于jQuery Mobile需要启用HTML5的浏览器，因此您需要使用CSS媒体查询，它们将为您提供最大的灵活性。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 1</li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 2</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 3</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li data-role="list-divider">Listview 4</li>                
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
                <li><a href="item1.html">item1</a></li>
            </ul>            
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

和CSS：

ul { 
float: left; width: 100% !important; 
}

/* iPhone Horizontal -------------------*/ 
@media all and (min-width: 480px){  
ul { width: 100% !important; } 
}       

/* iPad Verticle -----------------------*/ 
@media only screen and (min-width: 768px) {
ul { width: 50% !important; } 
}  

/* iPad Horizontal ---------------------*/ 
@media only screen and (min-width: 1024px) {     
ul { width: 50% !important; } 
}  

/* Nexus 7 Horizontal ------------------*/ 
@media only screen and (min-width: 1280px) {     
ul { width: 33.3333333% !important; } 
}  

/* Laptop 1440 -------------------------*/ 
@media only screen and (min-width: 1440px) {     
ul { width: 33.3333333% !important; } 
}  

/* Monitor 1600 ------------------------*/ 
@media only screen and (min-width: 1600px) {
ul { width: 25% !important; } 
}  

/* Monitor 1920 ------------------------*/ 
@media only screen and (min-width: 1920px) {     
ul { width: 20% !important; } 
}

Answer 2

您可以在列表样式中设置max-width ，然后将其向左浮动，这样，如果屏幕狭窄，它们将自动堆叠。 您还可以调查媒体查询，并且如果屏幕小于某个值，则仅使用100％宽度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.list {width:100%; max-width:500px; float:left;display:block;border:thin solid black;min-height:50px;}
</style>
</head>
<body>
<div class="list"></div><div class="list"></div><div class="list"></div><div class="list"></div><div class="list"></div>
</body>
</html>

JQuery Mobile：并排/下方放置元素-取决于平台

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-02-12 19:24:18

解决方案2
1 2013-02-12 18:59:27

JQuery Mobile：并排/下方放置元素-取决于平台

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-02-12 19:24:18

解决方案2 1 2013-02-12 18:59:27

解决方案1
3 已采纳 2013-02-12 19:24:18

解决方案2
1 2013-02-12 18:59:27