更改类流体布局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;}
}

第一条规则将适用于所有屏幕尺寸。第二条规则适用于宽度为320px至768px的设备，它将覆盖现有规则。这意味着它会改变浮动，宽度和填充，但它不会改变，例如背景或盒子大小。