栅格系统的写法实践（响应式布局原理）——layui

layui是非常流行的前端框架，其栅格系统可以帮助我们快速进行页面布局，并且实现响应式效果。

一、栅格系统的常规使用方式

以下是一个常规的栅格系统示例代码：

<div class="layui-container">
    栅格系统示例：
    <div class="layui-row">
        <div class="layui-col-xs3 layui-col-sm6 layui-col-md9 layui-bg-green">
            你的内容 9/12
        </div>
        <div class="layui-col-xs9 layui-col-sm6 layui-col-md3 layui-bg-red">
            你的内容 3/12
        </div>
    </div>
</div>

在屏幕宽度为不同尺寸时呈现出对应的效果

xs：超小屏幕（<768px）

sm：小屏幕（768px <= sm < 992px）

md：中等屏幕（992px <= md < 1200px）

二、页面中只需要使用一种布局

上面的案例中，“登录”、“注册”两个按钮的排布采用栅格系统，他们在各种屏幕尺寸上都采用这种效果。按钮响应式布局的写法，应该对xs、sm、md、lg四种情况分别写对应的代码。整个代码看上去非常冗余。

<div class="layui-form-item layui-row">
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
        <button class="layui-btn layui-btn-primary layui-btn-fluid">注册</button>
    </div>
    <div class="layui-col-xs-offset2 layui-col-xs5 layui-col-sm-offset2 layui-col-sm5 layui-col-md-offset2 layui-col-md5">
        <button class="layui-btn layui-btn-fluid">登录</button>
    </div>
</div>

经过测试发现，只写xs的布局也能在各种屏幕尺寸下达到上述效果。代码看上去变得清晰了。

<div class="layui-form-item layui-row">
    <div class="layui-col-xs5">
        <button class="layui-btn layui-btn-primary layui-btn-fluid">注册</button>
    </div>
    <div class="layui-col-xs-offset2 layui-col-xs5">
        <button class="layui-btn layui-btn-fluid">登录</button>
    </div>
</div>

思考：为什么xs的设定能否满足所有屏幕尺寸？

三、分析与总结

1、以第一个案例为例，在屏幕为超小尺寸xs（<768px）时，xs的class是默认生效的。

2、当屏幕的宽度为sm（>=768px）时，layui使用了CSS3的多媒体查询@media，达到该尺寸后，让新的width属性生效，原来的则失效。

3、同样的道理，当屏幕达到中等尺寸md（>992px）时，对应的width生效。

总结：删除系统的响应式布局通过多媒体查询@media实现，默认的效果是xs，当屏幕宽度超过这一范围后，如果设置对应的栅格属性，则会生效，否则沿用上一个尺寸生效的栅格属性。

最佳实践：当页面布局在几种尺寸中采用相同的样式时，只需要写尺寸最小的栅格属性，稍大的尺寸下会沿用较小的尺寸属性。