nor*_*ulf 6 css grid sass responsive-design
我很难完全理解如何使用Frameless Grid.我的意思是,我完全理解这个概念.听起来不错.
我想我的牛肉只是它没有提供任何东西来定位你的元素.它只是设置它们的宽度,就是这样.因此,即使您将列宽应用于元素,除非您绝对开始浮动或定位,否则所有内容都会堆叠.
在这方面,我想我正在寻找一些建议,我是否可以使用一些通用定位样式来保持这些元素不被堆叠.
或者这太宽泛了？我应该根据具体情况定位我的元素吗？
(也只是我正在使用SASS的一个FYI,如果有帮助的话)
谢谢!
UPD:Frameless Grid提出了实际代码(SASS,LESS和JS),所以下面的答案已经过时了.
无框架比网格框架更像是一种方法.
除了用于网格计算的单个函数之外,它本身不会做任何事情(即使没有关于如何实际使用此函数的适当文档).
我们来看一下:
1.制作一个固定宽度的网格.
选择一个列宽,一个水沟宽度...你知道,通常的东西.不要担心列的数量,但是否则使用通常用于创建固定宽度网格的任何条件.我建议使用相对较小的色谱柱宽度以增加灵活性.
我们必须自己组装一个网格.使用任何东西来实现,Frameless不提供任何东西.列宽应固定宽度.
2.让它无限重复.
现在,为您的网格提供无限数量的列,这样无论您创建视口的宽度如何,都会有越来越多的列进入视图.想象一下,你正在看一个无限宽的蜂窝状,里面装满了柱子而不是六边形.
通过"无限数量",它们似乎意味着"任何必要数量".无框主页使用迷人的26列(您需要显示宽度为1920px才能查看),但frameless.scss仅提供16列的变量.
通过"为您的网格提供多个列"意味着"提出一种最大限度利用一定数量的列的设计".
3.将其居中在视口中.
将网格水平对齐到视口的中间.对于具有偶数列的网格(如图所示),将视口的中心点对齐在两个最中心列之间的装订线中间.对于奇数编号的网格,将其对齐在最中心列的中间.
这是非常基本的,但它需要我们手动执行另一行CSS代码.
那就是它,真的.
开始使用网格.使用媒体查询可以在更多列可用时调整您的设计.由于您将逐列而不是逐像素地进行调整,因此您可以准确选择布局应该和不应该适应的时间.例如,该网站仅适应320,480,600,900和1900像素.要查看它的实际效果,请尝试调整浏览器窗口的大小.
不,那不是"它".这就是工作实际开始的地方.
您必须手动编码网格以适应各种视口,而Frameless不提供任何工具.
因此,如果您正在寻找可用于组装网格的工具,我建议Susy.这是SASS的优秀和优雅的一部分.
Susy非常多才多艺.它有不同的网格类型(演示).它也有不同的方法:你可以首先通过声明单列宽度并让Susy调整列数来匹配窗口宽度.或者,您可以声明哪些列对应于窗口宽度,并让Susy相应地调整列宽.
Susy让您实现Frameless的建议,但它也提供了所有必要的工具.在技术上有所不同,Susy有着同样的想法:从手机的小网格开始,随着屏幕变大,使其变大.此演示说明了两个这样的步骤:它从7列开始,但如果屏幕宽度显示,则变为12列.
在这里,我创建了一个网站,使用Susy分五步:http://am-teh.ru你可以在这个StackOverflow帖子中看到这个网站布局背后的代码(以及它的概念演变).Susy的开发人员积极评价了它.
| 归档时间： |
|
| 查看次数： |
1659 次 |
| 最近记录： |