lessframework 柱状网格

Question

我正在尝试弄清楚如何使用 lessframework 来构建 2 - 3 列网格，但是如何开始呢？

在 CSS 代码中它说：

13 列布局 60 px 列，24 px 装订线，72 px 边距，总共 1212 px（滚动条的额外空间）

在http://lessframework.com/ 上，它表示旧浏览器为 8 列，台式机为 13 列……所以我在 @media only 屏幕和（最小宽度：1212px）媒体查询中添加列网格（或将其添加到不同的css文件）。

我试图找到一些例子，但还没有发现任何有价值的东西。

更新：

阅读大卫奥利弗的回答后，我将尝试回答问题：

• 320：1 列
• 480：1 列
• 768: 2 列
• 1280: 3 列

我希望这能回答这个问题。

Answer 1

从我对框架的看法来看，我相信这个想法是根据 CSS cmets 中提供的数字将您自己的列 CSS 插入 CSS 文件的相关媒体查询部分。与其他一些 CSS 列框架不同，您不会将预定义的类名应用于 div，而是根据需要将自己的选择器插入到起始 CSS 文件中。

但是，如前所述，这种方法不适用于无法处理媒体查询的移动设备，因为默认情况下假定视口宽度为 768 像素或更大。我相信这种方法更好：Rethinking the Mobile Web。另见Notes on designing for mobile phones (even if they’re not made by Apple)

所以你可以这样做：

// Stylesheet to set base styles for all browsers - mobile-friendly:
<link rel="stylesheet" type="text/css" href="css/base.css" />

// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" />  

// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" />

在 base.css 中，您不会定义列并让所有内容自然流动。

在 desktop.css 中，对于这三个内容区域，您可以拥有如下内容：

div#wrapper { width: 94%; margin: 0 auto; }
div#nav { width: 30%; float: left; }
div#content { width: 70%; float: left; }
div#extra { clear: both; }

在 desktop-wide.css 中，你可以有类似的东西：

div#nav { width: 20%; }
div#content { width: 60%; }
div#extra { width: 20%; clear: none; float: left; }

这些百分比不一定是现实的，因为你会有填充或边距，但希望它们能说明这个想法。

我计划很快在my wiki 写一个全面的方法，以防您以后想回来查看。

Answer 2

当您说“2-3 列网格”时，您指的是哪种设备？我建议您首先清楚地知道哪种尺寸的设备应该有列以及有多少列。也许 CSS 对你来说更有意义？

此外，我建议对框架使用的方法采用不同的方法：

首先，设置一个不依赖最小宽度媒体查询的单列基本样式表。这是为了给移动用户（包括那些设备不进行媒体查询的用户）提供移动友好的体验，而无需繁琐的水平滚动。与您引用的方法相比，这是这种方法的优势。

然后，添加一个带有媒体查询的样式表，指定最小视口宽度，例如 500 像素。这是为了添加仅适用于桌面浏览器的列布局和其他样式（例如背景图像）。

这是一个非常简短的概述和其他内容，例如让 Internet Explorer 使用媒体查询（需要 Javascript？）并确保那些不支持媒体查询的设备不会从最小视口宽度样式表加载背景图像将需要额外的细化。我正在编写我喜欢的方法，并且可以在完成后发布更多信息，或者我可以回到我的桌面计算机时发布更多信息。