欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

有关Css栅格体系的故事

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

  说到栅格体系(grid system),你大概见过这样的观念:

grid system for design

  像这样,通过牢靠的格子布局,来举办机关计划。这是一种计划气魄沤背同并且一向以来很普及地应用于网页计划规模。这样的气魄威风凛凛清楚、工致,可以让网页具有更友爱的赏识体验。

  而跟着相应式计划(responsive design)的风行,栅格体系开始被赋予新的意义,那就是,一种相应式计划的实现方法。

 栅格与相应式

  相应式的要点是为统一个页面计划多种机关形态,别离适配差异屏幕尺寸的装备。一样平常来说,是这样的感受:

responsive design impression

  可以看到,一个页面可以拆分成多个区块来领略,而正是这些区块配合组成了这个页面的机关。按照差异的屏幕尺寸环境,调解这些区块的排版,就可以实现相应式计划。其它,屏幕宽度较大的时辰,区块倾向于程度漫衍,而屏幕宽度较小的时辰,区块倾向于竖直堆叠。

  这些方方正正的区块是不是和栅格体系的格子挺相似?对的,为了让相应式计划更简朴易用,于是有了许多称为“栅格”(grid)的样式库。

  栅格样式库一样平常是这样做的:将页面分别为多少等宽的列(column),然后保举你通过等宽列来建设相应式的页面区块。

  固然看起来都是这样的思绪,但差异的栅格样式库,在做法上却是各有各的点子。下面,本文将先容几个较量有代表性的栅格样式库,报告它们的扼要道理和用法(正确的打开方法)。

 Bootstrap中的栅格

  Bootstrap把它的栅格放在CSS这个分类下,并称它为Gird system。默认分为12列。

  容器、行与列

  要领略Bootstrap中的栅格,最好从把握正确的行使要领开始。这个中有2个要点。

  第1个要点是容器(container),行(row)和列(column)之间的层级相关。一个正确的写法示譬喻下:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

  Bootstrap栅格的容器有两种,.container(牢靠像素值的宽度)和.container-fluid(100%的宽度),在这里,把它们都称为container。必要留意的是,row(.row)必需位于container的内部,column(如.col-md-6)必需位于row的内部。也就是说,container、row、column必需保持特定的层级相关,栅格体系才可以正常事变。

  为什么必要这样?查察这些元素的样式,会发明container有15px的程度内边距,row有-15px的程度负外边距,column则有15px的程度内边距。这些边距是存心的、彼此关联的,也因此就像齿轮啮合那样,限制了层级布局。这些边距着实也是Bootstrap栅格的优良之处,假如你想进一步相识,保举阅读The Subtle Magic Behind Why the Bootstrap 3 Grid Works

  假如要嵌套行使栅格,正确的做法是在column内直接续接row,然后再继承接column,而不再必要container:

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

  断点范例

  第2个要点,是差异的断点范例的意义及其搭配。

  Bootstrap栅格的column对应的类名形如.col-xx-y。y是数字,暗示该元素的宽度占据12列中的几多列。而xx只有特定的几个值可供选择,别离是xs、sm、md、lg,它们就是断点范例。

  在Bootstrap栅格的计划中,断点的意义是,当视口(viewport)宽度小于断点时,column将竖直堆叠(display: block的默认示意),而当视口宽度大于或便是断点时,column将程度分列(float的结果)。凭证xs、sm、md、lg的次序,断点像素值依次增大,个中xs暗示极小,即以为视口宽度永久不小于xs断点,column将始终程度浮动。

  偶然辰,会必要将多种断点范例组合行使,以实现更过细的相应式计划。此时差异的断点范例之间会有奈何的彼此浸染呢?

  先看看Bootstrap的sass源码是怎样界嗣魅栅格的:

@include make-grid-columns;
@include make-grid(xs);
@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}
@media (min-width: $screen-md-min) {
  @include make-grid(md);
}
@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}

  可以看到,用了min-width的写法,并且断点像素值越大的,对应代码越靠后。以是,假若有这样的一些元素:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-3">1</div>
        <div class="col-sm-6 col-lg-3">2</div>
        <div class="col-sm-6 col-lg-3">3</div>
        <div class="col-sm-6 col-lg-3">4</div>
    </div>
</div>

  那么它们应该是这样的结果:

"bootstrap grid example"

  团结前面的源码,可以想到,在上面这样视口宽度由小变大的进程中,起首是保持默认的竖直堆叠,然后高出了sm的断点,sm的样式见效,变为一行两列的排版,再继承高出lg的断点后,lg的样式也见效,因为lg的样式代码界说在sm之后,以是会包围掉sm的样式,从而获得一行四列的排版。

  以是,团结行使多个断点范例,就可以引入多个断点变革,把相应式做得越发过细。

  适度行使

  Bootstrap栅格固然很强盛,但也不该太过行使。譬喻,当你必要一个占据一整行宽度的元素时,请不要也想着让Bootstrap栅格参和进来,插手相同.col-xs-12这样的元素。现实上,你不必要任何栅格类,你必要的只是一个块元素。

 Foundation中的栅格

  Foundation栅格叫做Grid,它和Bootstrap栅格的计划异常近似,只是在类名和布局上有所差别。Foundation栅格同样默认12列。

  行与列

  类比之前Bootstrap栅格的例子,Foundation栅格的一个正确的写法示譬喻下:

<div class="row">
    <div class="medium-6 columns"></div>
    <div class="medium-6 columns"></div>
</div>

  Foundation栅格的行用.row暗示,而列由至少两个类名构成,一是.columns或.column(2种写法完全沟通,纯真为了支持语法偏好)表白这是列元素,二是.medium-6这种用于暗示断点范例和对应宽度。在默认环境下,Foundation栅格的断点范例从小到大依次是small、medium、large,个中small相同Bootstrap栅格的xs,也是指恣意屏幕尺寸下都程度分列。

  Foundation栅格没有container,只必要row和column,因此显得比Bootstrap栅格更简朴一些。个中row界说了最大宽度(可以以为包袱了container的部门成果),column界说了0.9375rem的程度内边距。假如要嵌套,如故是column内续接row,再继承接column。

  组合行使多个断点范例,其要领也和Bootstrap栅格沟通。必要留意的是,Foundation栅格的断点值是用的em而不是px,对应的,它们转换后的像素值也有别于Bootstrap栅格。

  Block Grid

  作为栅格体系的增补,Foundation还提供了其它一个叫做Block Grid的栅格。不外,它并不是一个超出传统栅格的新对象,而只是一个针对特定栅格应用场景的要领糖。

  下面是一个Block Grid的示例:

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

  个中,ul和li这样的特定标签组合是必需的。在这个示例中,屏幕宽度从小到大的变革进程中,列元素将依次是一行两列、一行三列、一行四列的排版方法。

  可以看到,Block Grid的布局也是行和列,但只必要在行上有一个类名。和Foundation的Grid对比,它简直有一些差异。一方面,Block Grid的行并没有界说最大宽度。另一方面,Block Grid的列必然是等宽的(事实li不必要任何类名)。

 Toast栅格

  前面先容的两个栅格样式库都来历于风行前端框架,并不是独立的。本文接下来要先容的Toast,则是一个独立的、很有设法的栅格样式库。

  出格的实现方法

  为什么说很有设法呢?请看它的一个正确的写法示例:

<div class="grid">
    <div class="grid__col grid__col--1-of-2"></div>
    <div class="grid__col grid__col--1-of-2"></div>
</div>

  相同的,这也是一行均分两列的排版。可以看到,Toast栅格的布局同样是行(.grid)与列(.grid__col)。可是,差异于始终以12列为参考的模式,它可以用1-of-2这样更为直观的类名。究竟上,这里用3-of-6、6-of-12等也可以,它们是沟通的。

  虽然,这并不是Toast最出格的处所。此刻,请想一下,Bootstrap及Foundation的栅格体系的column本来都是块元素,它们是怎样实现程度分列的?

  对的,用的是float。但Toast是怎样做的呢?它设法奇异,选用了display: inline-block;。假如你有相识过这个属性,你应该知道inline-block的元素会互相之间存在误差。Toast在选择这个属性的基本之上,奇妙行使了负外边距(譬喻margin-right: -.25em;),消除了误差对栅格column程度分列的影响。在我做了一些测试和应用后,我只能说,这个强行完成的计策要给个赞。

  非Mobile First

  在前面Toast栅格的示例中,并没有相同md、medium这样浮现断点范例的词。这是由于,Toast回收了“存在默认”的气魄威风凛凛。绝大部门环境下,只必要行使形如.grid__col--x-of-y的类名。Toast已经为这个类配置了断点(默认700px),低于这个断点为display: block;,高于这个断点为display: inline-block;。

  不测的是,差异于Bootstrap和Foundation默认取block的mobile first原则(竖直堆叠更切合小尺寸屏幕的排版要求),Toast则是把display: inline-block;放在了@media范畴之外,当做默认属性。这应该只是气魄威风凛凛偏好差别,就我小我私人而言,我照旧更拥护mobile first的计划气魄威风凛凛的。

  有关mobile first的相应式计划的实现,保举阅读Grid

  假如要插手多个断点变革,Toast是这样做:

<div class="grid">
    <div class="grid__col grid__col--1-of-4 grid__col--m-1-of-2">
    </div>
</div>

  上面这段代码的结果是,该栅格列在480px以下为block,占据满宽,481px~700px之间为inline-block,占据1/2宽度,701px以上为inline-block,占据1/4宽度。

 对栅格体系的增补

  前面先容的这些栅格样式库,源码都行使Less、Sass这些Css预编译器材,因此个中的12列、断点值、列间距等都是可设置的,只不外大部门环境下默认的就足够行使。

  固然栅格样式库很棒,但它们并不是相应式计划的所有。要使统一个应用在差异屏幕尺寸的装备上都具有较好的赏识体验,尚有许多其他本领可用(好比在尺寸更大的屏幕上行使更大的字体),栅格体系只是方法之一。

 结语

  借助Css栅格体系,我们可以很轻易地建设相应式的页面机关。但在这个进程中,领略种种栅格样式库的事变道理,正确行使它们,才气做出不变、靠得住的页面布局。

本文地址:http://itbyc.com/web/13202.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1