如何有效地使用Frameless网格？

Question

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

作者说它是" Less Framework " 的精神继承者:

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

:)

Answer 1

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

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

希望这会帮助别人.

Answer 2

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

希望它有用!

编辑:根据下面的建议,我的答案应该独立而不是简单地包含一个链接(足够公平!),我将添加以下内容:

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

例如,假设您希望#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;
}

假设您已经在/ @ em速记中表达了所有大小,例如,如果您将填充宽度表示为100/@ em而不是100像素,则此代码会将您的布局缩放6%,例如,如果您将填充宽度表示为100/@ em而不是100像素,则会缩放以及使用上述技术的其余布局.

同样,此代码会将您的布局缩小到一个级别:

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