Question

我也开始建立一个适合移动设备的网站。所以我也开始研究媒体查询和各种网格框架。我已经看过像Inuit.css这样的所有'主要玩家'，语义网格等等。并且发现可能对我来说最好的是frameless grid

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

确定。我已经研究了很多主要的framelessgrid.com页面（应该实现无框架网格）的所有较少/ css代码和html代码，但我无法理解我是如何实现它的。

：）

Answer 1

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

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

希望这会帮助别人。

Answer 2

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

希望它有用！

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

是的，@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;
}

Answer 3

如果你从编程方面来css，我强烈建议少一点。它会以一种很好的方式将css放入编程思想中。

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

有一种更好的方法。如果您在Windows上，只需安装winless或在OS X上安装Less app。他们是简单的文件监视器，每次您对.less文件进行更改时都会编译完成的CSS。如果您将项目设置为：

/样式 / CSS /更少

他们都会将编译好的css文件放在css目录中。然后你可以将你的html链接到css文件，而不必担心动态编译。它们同样适用于您的源代码管理平台。

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

我更喜欢frameless设置比Less Framework更多，但这是一个选择问题。

此外，如果您需要比无框架文档更多的内容，请确保查看用于actual site的css。

玩得开心！

Answer 4

在大约一个月的时间里一直在研究这个无框架的概念，并在大约一个星期前点亮了灯泡时刻......不确定无框架概念有多少，或者用更少的工作量。但我知道这个概念到目前为止还非常稳固。

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

但是我开始用其他变量换出阴沟和柱宽，并将它们分开以找到元素之间的良好比例。所以最后会出现一个master var，它可以通过一个数字更改来改变整个主题。 posibilitis是无止境的。

Answer 5

除了Stratboy上面的答案之外，我还想分享我的问题以及其他关于用于Framelessgrid的CSS Joni少的答案。我很难理解较少的CSS，SO社区真的很有帮助。