CSS-lessframework列网格

我试图弄清楚如何使用lessframework构建2到3列的网格,但是如何开始呢？

在CSS代码中显示：

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

在http://lessframework.com/上,它表示旧浏览器为8列,台式机为13列…所以我要在@media only屏幕和(最小宽度：1212px)媒体查询内添加列网格(或将其添加到其他CSS文件中).

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

更新：

阅读了David Oliver的回答后,我将尝试回答问题：

> 320：1列
> 480：1列
> 768：2列
> 1280：3列

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

最佳答案

从框架的角度来看,我认为这种想法是根据CSS注释中提供的数字将自己的CSS列插入CSS文件的相关媒体查询部分.与某些其他CSS列框架不同,您无需将预定义的类名应用于div,而是根据需要将自己的选择器插入到起始CSS文件中.

但是,如前所述,该方法不适用于无法处理媒体查询的移动设备,因为默认情况下假定视口宽度为768px或更大.我认为这种方法更好：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; }

这些百分比不一定会很实际,因为您会有填充或边距,但希望它们能说明问题.

CSS-lessframework列网格

相关文章