media-queries - 如何有效地使用无框网格？

Question

我也开始建立一个适用于移动设备的网站。所以我也开始研究媒体查询和各种网格框架。我查看了所有“主要参与者”，例如 Inuit.css、语义网格等，发现对我来说最好的可能是无框网格

作者说它是“ Less Framework的精神继承者”：

行。我已经研究了很多主 framelessgrid.com 页面的所有 less/css 代码和 html 代码（应该实现无框网格），但我无法弄清楚我如何真正实现它。

:)

score 13 · Accepted Answer

我终于使用了无框网格，所以我想回答我自己的问题：

不知道 :PI 的意思是，那个名字，不知道。不过没关系..（我这里也请了无框网格作者来回答，他没有。）
@cols变量。我认为基本上，它们是无框网格。好吧，他们不是，因为无框网格“只是”一个想法。但在实践中，这是与“标准”方法的主要 css 区别。您只需定义列中元素的宽度而不是像素。就这样。当然，这只能使用 Less 或 Sass 来完成。由于我不知道less和scss，我无法完全理解主要思想。你最终会说一个元素是 8 列宽，另外 5 列宽，等等。比计算像素简单得多。
见答案2：P

希望这对其他人有帮助。

score 6 · Accepted Answer

对于它的价值，我在这里为无框网格系统编写了一个教程：

希望它有用！

编辑：根据下面的建议，我的答案应该独立存在，而不是简单地包含一个链接（很公平！），我将添加以下内容：

是的，@cols变量确实是无框网格的关键。您可以使用它来调整元素的大小，就像使用任何其他度量单位一样。

例如，假设您希望 #firstDiv 占据三列，其中 #secondDiv，宽度为 2 列，在其右侧：

#firstDiv {
    width: @3cols;
    float: left;
}
#secondDiv {
    width: @2cols;
    margin-left: @gutter/@em;
    float: left;
}

请注意，您还必须考虑排水沟。

当您浏览样式表时，从移动样式开始，您可以使用@media查询，它会在您想要的任何地方启动，将样式添加到逐渐变大的屏幕，并在必要时覆盖先前声明的值。在每个步骤中，您都将在布局中添加列。

您还可以在中间步骤使用一种技术来缩放整个布局：

body {
    font-size: (@font-size + 1)/16*1em;
}

此代码将您的布局放大 6%，假设您一直在 /@em 简写中表达所有尺寸，例如，如果您将填充宽度表示为 100/@em 而不是 100 像素，它会缩放与使用上述技术的其余布局一起。

同样，此代码会将您的布局缩小一级：

body {
    font-size: (@font-size - 1)/16*1em;
}

score 2 · Accepted Answer

如果你是从编程方面来的 css，我强烈建议少一些。它将真正以一种很好的方式将 css 放入您的编程头脑中。

我遇到的问题之一是在每个页面加载时处理 css 的概念（这可能并不比处理 javascript 框架差）或设置 less 编译器以在您的服务器上运行。

有一个更好的办法。如果您使用的是 Windows 或OS X 的Less 应用程序，只需安装winless。它们是简单的文件观察程序，每次您对 .less 文件进行更改时，它们都会编译您完成的 css。如果你这样设置你的项目：

/样式 /css /less

它们都会将您编译的 css 文件放在 css 目录中。然后您可以将您的 html 链接到 css 文件，而不必担心即时编译。它们都适用于您的源代码控制平台。

Less只有大约一页的文档，因此您可以在大约一个小时左右的时间内进入并精通。使用它真的很有趣，因为如果你知道 css，你几乎已经知道它的语法。Less 是 css 的超集，所以你对 css 的了解仍然有效。少量的语法添加真的很容易掌握。

与Less Framework相比，我更喜欢无框架设置，但这是一个选择问题。

此外，如果您需要比无框架文档提供的更多内容，请确保查看用于实际站点的 css 。

玩得开心！

score 2 · Accepted Answer

大约一个月以来一直在研究无框概念，大约一周前就打了灯泡……不知道无框概念有多少，或者少了多少。但我确实知道这个概念到目前为止非常可靠。

我相信没有文档，因为他构建的是开发人员在自己的道路上分支并找到构建他的 less doc 并最终构建自己的框架的最佳方法的起点。

但是我开始用其他变量交换装订线和列宽并将它们划分以找到一个好的比率 brttween 元素。所以最后变成了一个主变量，可以通过一个数字变化来改变整个主题。可能性是无穷无尽的。

score 0 · Accepted Answer

除了上面Stratboy的答案，我想分享我的问题和其他关于少 CSS Joni 用于 Framelessgrid 的答案。我很难理解较少的 CSS，而 SO 社区确实提供了帮助。

5 回答 5