2

我目前正在玩 JQuery Mobile。我的想法是创建一个显示不同数量列表的页面（至少一个，最多为〜10）。

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

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

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

是否可以根据屏幕大小自动显示列表？

另请注意，我并不总是知道用户将创建多少个列表。

4

2 回答 2

3

这是一个工作示例：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; } 
}
于 2013-02-12T19:24:18.093 回答
1

您可以max-width在列表的样式中设置 a ，并将它们向左浮动，这样如果屏幕很窄，它们会自动堆叠起来。您还可以查看媒体查询，如果屏幕小于某个值，则仅使用 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>
于 2013-02-12T18:59:27.757 回答