火锅与响应式设计

刚下班回来没多久，小西就给我发微信说到楼下了。小西是我两年前认识的一个朋友，设计师，长得好看性格也不错，但不知道为什么一直单身。

她的业余爱好，除了做做设计，就是喜欢尝试各种美食。自从上次去重庆回来之后，她就一直问我带了什么好吃的。我出去玩向来不喜欢带特产，但这次去重庆却带了些火锅底料回来。小西知道后一直说要来找我涮火锅，今晚她就是冲着这火锅来的。

不一会她就到了，我一开门她就不客气地冲了进来。“呀，底料煮开了，可以开始涮了啊！”说着她就开始往锅里加菜。

“那开涮吧。”我在她旁边坐下，夹了几片牛肉进去。锅里的雾气弥漫开来，夹杂着火锅的浓烈气味，不一会暗红色的汤汁开始涌动起来。

（当然，这是我在重庆吃的）

“可以吃了！”她抢先夹了一片肉，吹了吹就迫不及待地吃了起来。

“唉？你能给我讲讲响应式设计吗？”她抬起头问道，嘴里却还在嚼着。

“为什么突然问这个？你们最近要做响应式网站吗？”我反问。

“恩，公司有个子站要做成响应式的，我想了解更深一点，好做设计。”说话间她又夹起一块酥肉。

我喝了口酒，说：“要想理解响应式设计，你得先理解‘文档流’的概念。你看这火锅，就像是一个网页，里面这些牛羊肉、鸭肠、酥肉、海带就是页面上的元素，这些元素就组成了一个‘文档流’。”

“在以前呢，人们很少用手机看网页，网页设计师就只用设计开发一套只在电脑上浏览的网站。”我夹了一块酥肉，继续说道：“但现在不行了，移动端屏幕大了，就得开发两套代码，甚至三套四套去适配不同尺寸的设备。于是呢，有人就想了个办法，让开发者只写一套代码，能够在不同尺寸展现不同的布局。”

“一个网页上的所有元素组成‘文档流’，就像瀑布一样，从左至右，从上至下一个个排列开来。我们在开发响应式网站时呢，一般也不会把元素宽度写成固定数字，而是使用百分比。这样当你使用不同尺寸的设备访问时，就可以看到元素之间的比例保持不变，比如侧边栏和右侧内容区域的宽度比永远是 1:3 。”

“但是呢，光保持比例不变还不行，在手机上这么小的屏幕上左右结构的布局不适用了，就得想办法让元素换一个布局。这时候 CSS 就出现了一种叫做媒体查询的特性，说人话就是让元素在不同尺寸、不同分辨率下使用不同的样式。”

我放下筷子，把电脑拿了过来。“我用 Bootstrap 作为示例给你讲一下吧。”

“ Bootstrap 呢，定义了一套响应式栅格系统，在这个栅格系统中网页元素通过行（Row）与列（Column）来布局，最外层是容器（Container）。容器会在不同设备下显示不同的宽度，不过这些你是可以通过代码自定义的。容器里面包含一或多行，每一行里面又包含若干列。Bootstrap 提供的一些关于列的 CSS 类（ class ），可以将行按照 12 列划分。比如你想实现左右两列按照 1:3 布局，那么就是左边占据  3 列，右边占据 9 列，这样就可以通过给元素添加这些类来灵活布局了。”

“而且，列中可以再次嵌套行和列，这样就能应对各种复杂布局了。”我补充道。

“那它是怎么实现不同尺寸不同布局的呢？”小西好奇地问道。

“它提供的那些列的类，可以帮助元素在不同尺寸下获得不同的宽度样式。首先它定义了一些临界点，即宽度的分界点。”

“col 是列的 class 的前缀，xs、sm、md、lg 分别代表了不同的宽度范围，最后跟一个数字，是从 1 到 12 这 12 个整数中的一个，表示该元素占据多少列。比如给一个元素添加 col-sm-3 类，就表示当屏幕宽度大于等于 768px 时它的宽度为 3/12 即 25%，当设备尺寸小于 768px 时，它就占满一整行，以此类推。”

说话间我们已经快把菜煮完了，我又给她拿了一瓶饮料，继续说道：“比如说我们定义两个元素，在小屏幕（屏幕尺寸 < 768px）时上下堆叠各占一行，超过这个屏幕宽度就按照左右 1:3 布局，就可以这么写。”

<div class="container">    <div class="row">        <div class="col-sm-3">侧边</div>        <div class="col-sm-9">内容</div>    </div> </div>

“同时呢，Bootstrap 还提供一些辅助类，可以帮助你在一定尺寸范围内显示或隐藏元素。”

“奥~我明白了。”小西作恍然大悟状，点了点头。“那，我做设计的话，是不是这 4 种设备尺寸都要做一套呢？”

“以前的话是这样的，但是最近我发现了一个 Sketch 插件，可以把你的一套设计稿转换成响应式的网页。这个插件叫做 Sketch2react （https://sketch2react.io），你过来我给你演示一下。”我向她招手。

“你看啊，这个插件是这样工作的。你通过侧边的图层结构，来将设计图转换成对应的 HTML 元素结构，图层命名则会转换成对应的 class ，赋给这个元素。这样，转换成网页之后，这些元素就会在这些类的规则下，拥有了自己的样式，变成了响应式的网页。”

“其实呢，你就是把左边的图层结构区当成了代码编辑器，再给元素写不同的 class ，具体的规则你可以看他们的文档。现在你只需要把这个 Sketch 文件拖到 https://sketch2react.io/sketch2reactpreviewer 这个页面中，在这个页面中就自动生成了你的设计预览，你看它真的是响应式的。”我拖动着浏览器窗口，不断变换着尺寸给她看。

“怎么样？是不是很好玩？”我问她。

“好棒啊，这样我就只用做一套设计了，阿南你太棒了！”她猛拍了我一下，我下意识地躲远了一点。

我一看表，都快十点了，就催她：“时间不早了，你快点回去吧。”

“吃的好撑啊，要不你陪我下去走走，消化消化，我再回去？”她转过头，望着我说。

“改天吧，都这么晚了我想收拾收拾早点睡觉。”我边说边推着她往屋外走。

送她到楼下，约的车刚好停在路边。在她刚要上车时，我好像突然想起了什么。

“等一下，我有句话要和你说。”我走到她面前。

路灯照着她的侧脸，几丝头发在她额头前随着微风摆动。她的脸颊微微泛红，低下了头，轻声回道：“你说。”

“不一定都要做响应式的，有些网站内容层级或交互效果很复杂的话，还是把两端分开开发比较合适。我说完了，你快回吧，我要回去睡了。”说完我头也不回地钻进楼道里。