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，然后向左浮动它们，这样如果屏幕很窄，它们会自动堆叠。您还可以查看media queries，如果屏幕小于某个值，则仅使用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 个答案: