我这人做网站做了快十年了，以前一直都盯着电脑屏幕写代码，根本没把手机端当回事。直到去年，我媳妇儿让我给她的“副业”搞一个简陋的宣传页，她就一个死要求：必须在手机上看也要舒服，而且预算，那是抠得要死，就给个三位数。

我当时心想，这不就是响应式吗？我好几年没好好碰这玩意儿了。行，硬着头皮，我就重新拾起来，给自己定了个“五步走”的实践计划。

第一步：打好地基（Viewport）

我立马打开编辑器，建了个空白的HTML文件。以前我都是直接写，这回我清楚了，响应式的地基就是那个叫“Viewport”的元标签。我把它抄进来，放进里。不加这句，手机根本不知道你的网站要跟着屏幕缩放。这是关键，必须搞定！

第二步：搭骨架（纯HTML结构）

地基打好了，接着就是搭骨架。这步没啥高深的技术，就是div套div，用最简单的语义标签，把标题、导航、产品图片、底部信息这些内容给码出来。确保即使没有样式，结构也是清晰的，内容顺序是合理的。

第三步：先写手机样式（移动优先）

我这回学乖了，没有直接写电脑的大样式。我决定从最小的手机屏幕开始写起，行业里叫“移动优先”。我把所有基础的字体大小、颜色、图片宽度这些都先针对手机屏幕写完了。图片宽度我直接设成了`max-width: 100%;`，这样它就不会溢出屏幕了。

第四步：媒体查询改布局（核心实践）

手机样式有了，现在要让它在大屏幕上变身。这是响应式的灵魂所在，就是“媒体查询”（Media Query）。我主要做了三件事：

• 我设定了两个断点，一个给平板（比如768像素以上），一个给电脑（比如1200像素以上）。
• 在768px以上的时候，我把原来的单列布局（比如产品列表）改成了两列，让内容利用起更大的空间。
• 在1200px以上的时候，我又改成了四列，导航栏也从汉堡菜单彻底展开。

我当时来回拖动浏览器窗口，看它是不是会自己变，鼠标在浏览器边框上左右拉伸了几十遍，看着那些图片和文字自己找位置，那种成就感，别提多过瘾了。

第五步：真机测试与微调

代码写完，我直接把文件扔到服务器的测试路径上。我掏出自己的安卓手机，又拿过老婆的苹果平板，来回滑动、点击。我发现产品图片在平板上稍微有点挤，尤其是边距。于是我赶紧跑回去微调了768px那个断点下的左右边距。又发现文字在安卓机上显示有点小，又把字号稍微调大了一点。

那天晚上我搞到了凌晨一点多，虽然人累得够呛，但第二天媳妇儿一看，发微信跟我说：“你这弄得真不错，手机上看也高级！”那感觉，值了。这个响应式网站，我算是真正从头到尾实践了一遍，说白了，就是打地基、搭骨架、先写手机样式、媒体查询改布局、真机测试，这五步，让你把网站交给用户时，无论他用什么设备，都能舒舒服服地看内容。