html - クラスの流体レイアウトCSSを変更する

Question

流動的な CSS グリッドがあります ( http://cssgrid.net/ )

私は現在、このグリッドシステムを使用して Web サイトを設計しています。ただし、「十分なスペースがない」場合にクラスを変更する方法がわかりません。

例、私はこのようなトップバーを持っています:

しかし、ブラウザウィンドウのサイズを十分に変更すると、次のようになります。

ここに画像の説明を入力

ご覧のとおり、完全にめちゃくちゃに見えます。

この流動的なレイアウトを最大限に活用するにはどうすればよいでしょうか。つまり、これらのボタンとユーザー名を入れる十分なスペースがない場合、どうすればそれらを収めることができるでしょうか? つまり、新しいクラスを作成して別の場所に配置します。

ありがとう！

score 0 · Accepted Answer

あなたがそのようなものを持っているとき：

aside {float: left; width: 50%; padding: 0 50px; box-sizing: border-box; background: #000;}

次のようなものを追加できます。

@media only screen
and (min-device-width : 320px)
and (max-device-width : 768px) {
   aside {float: none; width: 100%; padding: 0 20px;}
}

最初のルールはすべての画面サイズに適用されます。2 番目のルールは、幅が 320px から 768px のデバイスに適用され、既存のルールを上書きします。これは、フロート、幅、およびパディングが変更されることを意味しますが、背景やボックスのサイズなどは変更されません。

1 に答える 1