3

Skeleton を使用して既存のサイトをレスポンシブにしていますが、理解できないことが 1 つあります。

<div class="sixteen columns">
<div class="ten columns alpha">HEADER</div>
<div class="six columns omega" style="float:right;">search box</div>
</div>

これは、次のように 2 つの列が隣り合っている場合に見栄えがします。

| HEADER                      search box |

ただし、画面が小さく、列が垂直に積み重ねられている場合、積み重ねは問題ありませんが、フロートは見栄えが悪くなります。

| HEADER              |
|          search box |

列が重なっているときに検索ボックスを左にフロートさせるにはどうすればよいですか?

Skeleton のメディア タイプを使用して、検索ボックスのフロート スタイルを修正する必要がありますか?

ご協力いただきありがとうございます。

4

2 に答える 2

2

[メディアクエリ]を使用して検索ボックスのフロートスタイルを修正する必要がありますか？

はい。:-)

 @media only screen and (max-width: 479px) {
      .search-box{
           float:left;
      }
 }
于 2011-11-25T02:16:21.490 に答える
0

これを実現するには、単純なメディアクエリを使用できます。

@media screen and (max-width: 200px) {
  .omega{
     float:left;
  }
}

max-widthつまり、ビューポートが小さい場合は、更新されたスタイルを適用します。min-width同じように機能するものを使用することもできますが、それはより大きいことを意味し、ビューポートが幅よりも大きくなるとスタイルを適用します。

于 2011-11-25T02:16:33.163 に答える