html - 更改类流体布局 css

Question

我有一个流畅的 CSS 网格 ( http://cssgrid.net/ )

我目前正在使用这个网格系统设计一个网站。虽然，我不确定当“没有足够的空间容纳他们”时如何更改类(class)。

例如，我有一个像这样的顶部栏:

链接:http://i47.tinypic.com/2eouv54.png

但是当我足够大地调整浏览器窗口时，我会得到这样的结果:

如您所见，它看起来完全乱七八糟!

我怎样才能充分利用这种流畅的布局。我的意思是，当没有足够的空间容纳这些按钮和用户名时，我怎样才能让它们适合呢？ IE。通过创建一个新类并将其放置在其他地方。

谢谢!

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 的设备，它将覆盖现有规则。这意味着会改变 float 、宽度和填充，但不会改变，例如背景或框大小。