先看一个数：现在一半以上的流量来自手机啊。如果你的网站只在电脑上好看，手机打开一团乱，用户扭头就走。响应式就是让同一个网页，在大屏小屏上都排得顺眼。

第一步，加个视口标签。打开HTML的head部分，写上：

这行代码告诉手机浏览器：按设备的实际宽度来显示，别自作主张缩小。漏了它，后面全白搭。

第二步，别写死宽度。以前做网页爱用固定像素，比如width:960px。屏幕一窄就出横向滚动条。改成百分比或者max-width。比如：

.container { max-width: 1200px; width: 90%; margin: 0 auto; }

这样容器最多1200像素，屏幕小的时候自动缩到90%。

第三步，用媒体查询做分档。简单说就是“屏幕小于多少时，换一套样式”。手机、平板、桌面三档够用了：

@media (max-width: 600px) { ... }

@media (min-width: 601px) and (max-width: 1024px) { ... }

窄屏下，把多列改成单列。导航菜单收进一个汉堡按钮里。字体稍微调小一点。

第四步，图片要灵活。给图片加一句：

img { max-width: 100%; height: auto; }

图片就不会撑破容器。有条件的话再上srcset，让手机加载小图，省流量也快。

第五步，布局用弹性盒子。Flexbox让元素自动换行、自动分配空间，比老式浮动布局省心太多。比如：

.row { display: flex; flex-wrap: wrap; }

子元素设个flex: 1 1 300px，意思是“至少300像素宽，空间够就并排，不够就换行”。很多情况下一行代码解决响应问题。

最后呢，真机测试。浏览器开发者工具里有个设备模拟功能，切换几个常见尺寸看看。但模拟不如真机，借台手机实际滑一滑，按钮好不好点，字看不清，一眼就知道。

记住几个原则：宽度用百分比，别用固定像素；字体用rem，跟着根字号走；先做手机版，再往大屏加，这叫移动优先，比反过来省事。

响应式不神秘。视口标签打底，百分比和max-width控制伸缩，媒体查询分档调整，图片设上限，Flexbox收尾。照着做一遍，你的网站手机电脑都能看。