更改類流體布局CSS

Question

我有一個可變的CSS網格（ http://cssgrid.net/ ）

我目前正在使用此網格系統設計一個網站。 雖然，我不確定在“沒有足夠的空間容納他們時”如何更改班級。

例如，我有一個像這樣的頂部欄：

鏈接： http ： //i47.tinypic.com/2eouv54.png

但是，當我調整瀏覽器窗口的大小足夠時，最終得到以下結果：

如您所見，它看起來完全混亂了！

如何充分利用這種流暢的布局。 我的意思是，如果沒有足夠的空間容納這些按鈕和用戶名，我該如何適應它們？ 即通過開設新課程並將其放在其他地方。

謝謝！

Answer 1

當你有這樣的事情：

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;}
}

第一條規則將適用於所有屏幕尺寸。 第二條規則將應用於寬度從320像素到768像素的設備，它將覆蓋現有規則。 這意味着將更改浮動，寬度和填充，但不會更改，例如背景或框大小。