做网站，先别急着写代码。打开浏览器，把窗口拉窄，再拉宽。如果你的网页只会跟着变宽，挤成一团或者错位，用户扭头就走。响应式要解决的就是这件事：同一套代码，手机、平板、电脑都看得舒服。

第一步，加一行meta标签。没有它，手机浏览器会把页面当成电脑版缩小显示，字小得没法看。写在head里：``。就这一行，页面宽度等于设备宽度，缩放比例正常。

第二步，别用固定宽度。以前写`width: 960px`，现在改成百分比或者`max-width`。比如容器写`max-width: 1200px; width: 100%;`，两边留白自动处理。图片也一样，加`max-width: 100%; height: auto;`，图片就不会撑破手机屏幕。

第三步，用媒体查询切换布局。电脑上三栏并排，手机上肯定放不下。写一个断点：

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


.column { width: 100%; }


}

意思是屏幕窄于768像素时，每栏占满整行。断点不用多，两三个够用。常见的是768和1024，具体看你的在哪儿开始挤。

第四步，字体和按钮要照顾手指。手机上点东西用的是指头，不是鼠标箭头。按钮最小高度44像素，链接之间留点空隙，别让人点错。正文字号别低于16像素，不然手机上看久了眼睛疼。

第五步，测试。别只在电脑上拉窗口模拟。拿真手机打开看，横屏竖屏都试。重点看导航栏会不会挤爆、表格能不能滑动、图片有没有变形。发现问题就回去调断点。

最后一点说个常见坑：别给手机单独做一套网站。有人图省事，检测到手机就跳到m.xxx.com，维护两套代码，迟早乱套。响应式就是一套代码搞定，省心。

按上面五步走，一个能用的响应式页面就有了。不复杂，动手改改你现在的网站试试。