浅谈CSS 栅格数据系统软件合理布局基本原理剖析

2021-03-18 03:54 jianzhan

大家都知道,如今前端开发有许多相近于bootstrap,foundation这样出色的UI架构,它们都出示了自身的1套回应式合理布局计划方案,即栅格数据系统软件。用过的人都了解要是给网页页面的元素加上其栅格数据系统软件特定的类名,就可以做到你想做到的回应式合理布局实际效果,简约而雅致。笔者有很长1段時间不搞清楚栅格数据系统软件是根据甚么样的基本原理完成,遂剖析了1下流行架构的源代码,发现实际上其实不繁杂,乃至自身还可以完成1套很简易的栅格数据系统软件。

1、Bootstrap

bootstrap的栅格数据系统软件用于根据1系列的行(row)与列(col-*)的组成来建立网页页面合理布局,它的栅格数据系统软件最大分成12份:

<div class="container">
    <div class="row">
        <div class="col-md⑴2">col⑴2</div>
    </div>
    <div class="row">
        <div class="col-md⑷">col⑷</div>
        <div class="col-md⑷">col⑷</div>
        <div class="col-md⑷">col⑷</div>
    </div>
    ...
</div>

但是bootstrap@3.x版本号与@4.0版本号完成栅格数据系统软件方法不1样:

bootstrap@3.x版本号以便适配IE8,选用的是波动方法来完成栅格数据系统软件:

[class |= col] { float: left; }
.col-md⑴ { width: 8.33333333%; }
.col-md⑵ { width: 16.66666667%; }
.col-md⑶ { width: 25%; }
.col-md⑷ { width: 33.33333333%; }
.col-md⑸ { width: 41.66666667%; }
.col-md⑹ { width: 50%; }
.col-md⑺ { width: 58.33333333%; }
.col-md⑻ { width: 66.66666667%; }
.col-md⑼ { width: 75%; }
.col-md⑴0 { width: 83.33333333%; }
.col-md⑴1 { width: 91.66666667%; }
.col-md⑴2 { width: 100%; }

即每行的1个栅格数据全是用左波动和百分比来开展排版,当对话框宽度更改,对应更改container器皿的宽度,对应栅格数据宽度当然也跟随更改:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

bootstrap@4.0版本号舍弃了对版本号IE的适用,栅格数据系统软件选用的是全新的伸缩合理布局方法:

.row {
    display: flex;
    flex-wrap: wrap;
}
.col⑴ { flex: 0 0 8.333333%; }
.col⑵ { flex: 0 0 16.666667%; }
.col⑶ { flex: 0 0 25%; }
.col⑷ { flex: 0 0 33.333333%; }
.col⑸ { flex: 0 0 41.666667%; }
.col⑹ { flex: 0 0 50%; }
.col⑺ { flex: 0 0 58.333333%; }
.col⑻ { flex: 0 0 66.666667%; }
.col⑼ { flex: 0 0 75%; }
.col⑴0 { flex: 0 0 83.333333%; }
.col⑴1 { flex: 0 0 91.666667%; }
.col⑴2 { flex: 0 0 100%; }

栅格数据系统软件能够决策每个栅格数据的排版次序,两种栅格数据系统软件完成方法不一样,当然她们得排版方法也不一样:

/*
 * bootstrap@3.x版本号 排版
 */
[class |= col] {
    position: relative;
}
/* 向右挪动特定的栅格数据数 */
.col-md-pull⑴ { right: 8.33333333%; }
.col-md-pull⑵ { right: 16.66666667%; }
.col-md-pull⑶ { right: 25%; }
...
/* 向左挪动特定的栅格数据数 */
.col-md-push⑴ { left: 8.33333333%; }
.col-md-push⑵ { left: 16.66666667%; }
.col-md-push⑶ { left: 25%; }
...

/*
 * bootstrap@4.0版本号  排版
 */
.order⑴ { order: 1; }
.order⑵ { order: 2; }
.order⑶ { order: 3; }
...

能够看到,@3.0版本号选用的是相对性精准定位开展上下挪动栅格数据来开展排版,@4.0版本号就很简约,只用选用flex合理布局独有的order特性来开展排版。自然,这两个版本号也是有同样的排版方法,便是offset偏位:

/* bootstrap@3.x版本号偏位 */
.col-md-offset⑴ { margin-left: 8.33333333%; }
.col-md-offset⑵ { margin-left: 16.66666667%; }
.col-md-offset⑶ { margin-left: 25%; }
...

/* bootstrap@4.0版本号偏位 */
.offset⑴ { margin-left: 8.33333333%; }
.offset⑵ { margin-left: 16.66666667%; }
.offset⑶ { margin-left: 25%; }
...

二者都用margin-left开展偏位量设定。

2、Pure

pure的栅格数据系统软件又是此外1种方法完成,它适用最大24等分的栅格数据:

<div class="pure-g">
    <div class="pure-u⑴⑶">1/3</div>
    <div class="pure-u⑴⑶">1/3</div>
    <div class="pure-u⑴⑶">1/3</div>
</div>
<div class="pure-g">
    <div class="pure-u⑴⑻">1/8</div>
    <div class="pure-u⑴⑻">1/8</div>
    <div class="pure-u⑴⑻">1/8</div>
    ...
</div>
<div class="pure-g">
    <div class="pure-u⑴⑵4">1/24</div>
    <div class="pure-u⑴⑵4">1/24</div>
    <div class="pure-u⑴⑵4">1/24</div>
    ...
</div>

pure它的栅格数据系统软件选用的是伸缩与行内融合的方法:

.pure-g {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-flow: row wrap;
}
[class|=pure-u] {
    display: inline-block;
    *display: inline;   /*iE < 8*/
    zoom: 1;
}
.pure-u⑴⑵4 { width: 4.1667%; }
.pure-u⑵⑵4,.pure-u⑴⑴2 { width: 8.3333%; }
.pure-u⑶⑵4,.pure-u⑴⑻ { width: 12.5000%; }
.pure-u⑷⑵4,.pure-u⑴⑹ { width: 16.6667%; }
.pure-u⑸⑵4 { width: 20.8333%; }
...

但是它是不适用偏位和特定次序的排版。

3、Foundation

fundation的栅格数据系统软件基本原理实际上是和bootstrap@4.0版本号如出1辙,全是选用伸缩合理布局的方法,最大适用12等分的栅格数据:

.grid-x {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; 
}

.grid-x > .small⑴ { width: 8.33333%; }
.grid-x > .small⑵ { width: 16.66667%; }
.grid-x > .small⑶ { width: 25%; }
...
.grid-x > .small⑴2 { width: 100%; }

4、总结

UI架构栅格数据系统软件完成方法基础为3种:

1. 纯伸缩合理布局flex方法: 这类方法对古老的IE访问器适用性并不是很好,因此1般出現在技术性较为激进的架构上,如Bootstrap@4.0,Foundation,根据React的antDesign,根据Vue的ElementUI 这些。
2. 波动方法:这类方法是以便向下适配IE低版本号访问器,例如用途很广的Bootstrap@3.x版本号。
3. 伸缩和行内融合的方法:yahoo的Pure。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。