lessframework列网格

时间:2010-11-21 07:54:28

标签: css

我正在试图弄清楚如何使用lessframework来构建一个2到3列的网格,但是如何开始?

在CSS代码中说:

13列布局 60 px列,24 px gutters,72 px页边距,1212 px总计(滚动条的额外空间)

http://lessframework.com/上,它表示旧浏览器有8个字符串,桌面有13个字符串...所以我在@media only屏幕和(min-width:1212px)媒体查询中添加列网格(或添加它)到另一个css文件)。

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

更新:

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

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

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

2 个答案:

答案 0 :(得分: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; }

这些百分比不一定是现实的,因为你有填充或边距,但希望他们表明这个想法。

我计划很快在my wiki写一个综合方法,以备日后查看。

答案 1 :(得分:0)

当您说“2-3列网格”时,您的意思是哪种设备?我建议您首先要清楚哪些设备应该有列以及有多少列。也许CSS会对你更有意义吗?

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

首先,设置一个不依赖于最小宽度媒体查询的单列基本样式表。这是为移动用户(包括其设备不进行媒体查询的用户)提供移动友好体验,而无需繁琐的水平滚动。这种方法的优势超过了您所引用的方法。

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

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