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

GetSkeletonを使ったレスポンシブなデザイン:メディアタイプによって左右に浮かぶ方法は?

私は既存のサイトを反応的にするためにスケルトンを使用しています。把握できないことが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 |

列が積み重なったときに検索ボックスを左に浮かべるにはどうしたらいいですか?

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

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

3

2 答え

これを達成するために単純なメディアクエリを使うことができます:

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

max-width means, when the viewport is less-than then apply the updated style. You can also use min-width which works much in the same way however it means greater-than and will apply the style once the viewport is bigger than the width.

0
追加された