做网站最烦什么？电脑上排得好好的，手机上打开就乱成一锅粥。以前的办法是给手机单独做一套页面，维护两套代码，改一个地方得改两遍。响应式布局就是来解决这个问题的。一套代码，屏幕多大就显示多宽，不用来回折腾。

先说清楚原理。网页里每个元素都有宽度，默认情况下宽度是固定的。响应式靠的是把固定宽度换成百分比，再配合媒体查询，在特定屏幕尺寸下换一套样式。就这么简单，没什么高深的东西。

第一步，写meta标签。在HTML的head里加上这行：

html

不加这行，手机浏览器会假装自己是桌面浏览器，把页面缩小显示，字小得没法看。加了之后，页面宽度就等于手机屏幕宽度，一切从头开始算。

第二步，布局别用固定像素。以前写`width: 960px`，现在改成`width: 100%`，外面套一个`max-width: 1200px`。意思是：屏幕小的时候占满，屏幕大的时候最多1200像素，两边留白。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破容器。

第三步，用媒体查询换布局。比如三栏布局，在电脑上是左中右并排，手机上得竖着排。写法：

css
@media (max-width: 768px) {


.column { width: 100%; float: none; }


}

意思是屏幕宽度小于768像素时，每栏占满整行，取消浮动。768这个数不是死的，看你的在哪断掉就设在哪。

第四步，字体和间距跟着调。手机上字别太大，电脑上字别太小。用`rem`代替`px`，根字号设成16像素，其他地方按倍数写。媒体查询里改一下根字号，整页的字就跟着缩放，省事。

第五步，测试。别只在自己电脑上缩窗口看。用浏览器开发者工具的设备模拟，把常见手机型号过一遍。重点看三处：导航栏会不会挤成两行、表格会不会溢出、按钮手指点不点得准。按钮至少留44像素高，这是手指能舒服点按的底线。

末了说说个容易踩的坑：别给元素写死高度。多了会溢出，少了留一大块空白。高度让自己撑，需要等高的用flex布局解决。

响应式不是什么高级技术，就是把“固定”换成“弹性”，再用媒体查询在几个关键尺寸上微调。花半天时间改一套模板，以后加页面就不用再操心手机端了。