CSS 响应式布局系统的实例代码

@each $device, $breakpoint in $breakpoints {
@media only screen and (min-width: $breakpoint) {
.container {
max-width: map-get($container-max-widths, $device);
}
}
}

7 行代码搞定！

下面解释下上面的代码。

我们对列表遍历，使用的是 @each…in 语法，每一次遍历取出对应的 key、value，得到当前的 $device 、 $breakpoint 。 map-get 是 SCSS 提供的用来操作列表的方法：根据 key 取出 value。比如，当 $device 值为 xs 的时候， map-get($container-max-widths, $device) 对应值为 none ；当 $device 值为 sm 的时候， map-get($container-max-widths, $device) 对应值为 540px ，以此类推。

@media only screen and (min-width: $breakpoint) { ... } 

中包含的代码，表示从当前设备断点开始处，应用的 CSS 样式。 当我们同时按照从小到大的顺序设置两个断点的媒体查询时，后者会覆盖前者的样式 ，这是实现不同视口下，具有不同宽度容器的核心原理。

接下来，将得到的宽度值赋给容器的 max-width 属性就可以了。

到现在为止，我们就写出了一个响应式容器了，我们总揽下代码：

$breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
xs: none,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
.container {
margin-left: auto;
margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
@media only screen and (min-width: $breakpoint) {
.container {
max-width: map-get($container-max-widths, $device);
}
}
}

点击这里，查看效果。

下面再来介绍 12 列栅格布局。

12 列栅格布局

先使用 Flex 布局，写一个最简的等宽布局。

.row {
display: flex;
 .col {
flex-grow: 1;
flex-basis: 0;
}
}

没错，这就是使用 Flex 布局实现一个等宽布局的所有代码了。如果不考虑中间的空白行，只需要 7 行代码。

这里的原理是，我们将所有 Flex 项目的 flex-basis 设置为 0 了，就是说这些 Flex 项目在 grow 或 shrink 之前都没有宽度，是一样长的。这样最终计算出来的主轴空间会平均地分配给了每个 Flex 项目，这样它们就等宽了。

到这里，我们所写的这个简易栅格布局有两个局限：

1.不能布局非等宽项目。
2.不支持换行。

换行的话很好弄，为 Flex 容器加个 flex-wrap: wrap 就可以了。那怎样处理“非等宽项目”排列布局呢。