2

私は現在、JQueryMobileで遊んでいます。私の考えは、さまざまな量のリストを表示するページを作成することです（少なくとも1つ、最大で最大10まで）。

それらをページに配置すると、リストは水平方向のスペース全体を埋めます。次に、それらは互いに下に配置されます。

これは、小さな電話画面でページを開く場合は問題ありませんが、画面サイズが大きいデバイス（タブレット、デスクトップブラウザ）では見栄えがよくありません。もちろん、グリッドを使用してそれらを並べて配置することもできますが、これは小さな画面のデバイスではデザインが悪くなります。

最良のケースは、デスクトップブラウザでページを開き、サイズを変更すると、画面サイズに応じてリストが置き換えられることです。電話ディスプレイでは、それらは常に互いに下に配置されます。

画面サイズに応じたリストを自動で表示することはできますか？

また、ユーザーが作成するリストの数が常にわかっているわけではないことにも注意してください。

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リストのスタイルにを設定し、左にフロートさせると、画面が狭い場合に自動的にスタックされます。メディアクエリを調べて、画面が値よりも小さい場合にのみ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 に答える