html - 更改类流体布局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 的设备，它将覆盖现有规则。这意味着会改变浮动、宽度和填充，但不会改变例如背景或盒子大小。