0

2 行 5 列で表示される大きなボタンとして機能する 10 個の div を持つページがありますが、ページのサイズが変更された場合、または画面が小さいデバイスでページが開かれた場合に、ボタンのレイアウトが自動的に変更されるようにしたいと考えています。しかし、どうすればいいのかわかりません。

どこから始めるべきですか、またはこれを達成するのに役立つ優れたチュートリアルを知っている人はいますか?

ありがとう

4

4 に答える 4

2

その名前は、リアクティブ (またはレスポンシブ) デザインです。ここで適切なイントロを見つけることができます: http://netuncovered.com/2011/05/reactive-web-design/

CSS で @media クエリを実行して、処理しているウィンドウのサイズを決定し、それに応じてスタイルを変更する必要があります。何かのようなもの：

@media screen and (min-width:768px)
{
    .my_div { width: 200px; }
}
@media screen and (min-width:1024px)
{
    .my_div { width: 300px; }
}

この例では、ウィンドウ サイズに基づいて div のさまざまなサイズを示します。@media クエリを使用して、画面のサイズに基づいて配置またはその他の CSS ルールを使用して同じことを行うことができます。

行の項目数をどのように変更するかという特定の質問について、次の HTML があるとします。

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear5"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>

ビューポートのサイズに応じて、クラス .clear3 または .clear5 が実際にフロートをクリアするタイミングを指定できます。何かのようなもの：

.item { float: left; width: 200px; }
@media screen and (min-width:768px)
{
    .clear3 { clear: both; }
    .clear5 { clear: none; }
}
@media screen and (min-width:1024px)
{
    .clear3 { clear: none; }
    .clear5 { clear: both; }
}

これにより、画面のサイズに基づいて、.item div の行ごとの div の数が変更されます。おもう。私は本当にそれをテストしませんでした。

于 2013-01-15T20:18:14.387 に答える
2

レスポンシブデザイン：これが私が学んだ方法です-

有料ですが、それだけの価値があります: http://www.codeschool.com/courses/journey-into-mobile

Twiiter Bootstap レスポンシブ セクションを入力して、それらがどのように機能するかを感じて ください。

メディア クエリに慣れる必要があります。

https://developer.mozilla.org/en-US/docs/CSS/@media

ページ サイズに対応する min-width ヘルパーと max-width ヘルパーがあります。

于 2013-01-15T20:19:41.830 に答える
2

レスポンシブ デザインの開始方法に関する優れた記事:

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

于 2013-01-15T20:27:45.470 に答える
1

これは、メディアクエリなしで実行できます 

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS:

#wrapper { max-width: 750px; overflow: hidden; border: 1px solid #000; margin: 50px auto; }
#wrapper div { width: 150px; height: 150px; float: left; }
于 2013-01-15T20:31:50.723 に答える