做网站，先别急着写代码。打开你的手机，看看那些排版错乱、字小得要用放大镜、按钮点不到的页面——这就是没做响应式的下场。

响应式说白了就一句话：同一个网站，屏幕大就多显示点，屏幕小就换个排法。不是做两个网站，是一个网站自动适应。

第一步，加一行代码。在网页头部写上 ``。这行告诉手机浏览器：别自作主张把页面缩小，按设备实际宽度来。漏了这行，后面全白搭。

第二步，别写死宽度。`width: 1200px` 这种写法在手机上直接撑爆。换成百分比或者 `max-width`。图片加一句 `max-width: 100%`，它就不会溢出容器。

第三步，用媒体查询换布局。比如桌面端三栏并排，手机端一栏叠起来：

css
.container { display: flex; }


@media (max-width: 768px) {


.container { flex-direction: column; }


}

断点选多少？看你的在哪儿开始挤。常见的是 768px 和 480px，但别死记，拖动浏览器窗口变窄，哪儿丑了就在哪儿设断点。

第四步，字别太小。手机上正文至少 16px。按钮和链接留足点击面积，手指不是鼠标指针，40px 起步。

第五步，导航栏要变。桌面端横排，手机端收进汉堡菜单。别硬塞，塞不下就换形式。

第六步，真机测试。浏览器开发者工具里那个手机模拟器只是参考。拿真手机打开，横屏竖屏都转一转。很多人栽在横屏上。

最后，响应式不是一次做完就完事。新加、新改样式，每回都得回头看看小屏幕上还正不正常。

别追求一步到位。先让页面在小屏幕上能读、能点、不乱跑，再慢慢打磨。用户用手机打开你的站，不用双指放大就能看清字，那你就赢了。