我试图弄清楚如何使用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列
我希望这能回答这个问题.
但是,如前所述,该方法不适用于无法处理媒体查询的移动设备,因为默认情况下假定视口宽度为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编写一种综合方法,以备日后查询.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。