css - lessframework 列网格

Question

我想知道如何使用 lessframework 构建 2 - 3 列网格，但如何开始？

在 CSS 代码中它说:

13 列布局 60 像素列，24 像素间距，72 像素边距，总计 1212 像素(滚动条的额外空间)

关于 http://lessframework.com/它说旧浏览器有 8 列，台式机有 13 列......所以我在@media only 屏幕和(最小宽度:1212px)媒体查询(或将其添加到不同的 css 文件)中添加列网格。

我试图找到一些例子，但还没有找到任何有值(value)的东西。

更新:

在阅读了 David Oliver 的回答后，我将尝试回答问题:

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

我希望这能回答问题。

Answer 1

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

但是，如前所述，此方法不适用于无法处理媒体查询的移动设备，因为默认假定视口(viewport)宽度为 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 写一个综合方法很快，如果您想稍后再回来查看。