做网站，先别想花哨。第一件事：手机打开看看，字能不能看清，按钮好不好点。看不清、点不着，这站就废了。现在一半以上的人用手机上网，你按电脑屏幕做的页面，到手机上挤成一团，用户三秒就关。

响应式说白了就一句话：页面会自己变。屏幕宽，横着摆；屏幕窄，竖着码。不用做两套网站，一套代码就够了。

怎么做到？先写这段，放head里：

少了它，手机就把页面当电脑版缩小，字小得像蚂蚁。

布局别用固定像素。`width: 960px`这种写法扔掉。用百分比、`flex`、`grid`。比如三栏变一栏：

.container { display: flex; flex-wrap: wrap; }
.box { flex: 1 1 300px; }

屏幕够宽，三个盒子并排；不够宽，自动堆下来。一行代码不用改。

图片也得听话：

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

大图塞满手机，撑破屏幕的事就没了。

字体别写死。手机上一行字太多，眼睛累。手机上14到16像素合适，行高1.5以上。桌面上可以大点。用`rem`，改一处全站跟着变。

断点不用搞七八个。常见就两三个：手机一个，平板一个，桌面默认。比如：

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

就这一句，小屏时换布局。

导航最容易翻车。电脑上横着一排，手机上挤不下。窄屏时收起来，一个按钮点开菜单。别做那种悬停才出来的效果，手机没有悬停，手指点不着。

表格、长代码块，窄屏会溢出。外面套个能横向滚的容器：`overflow-x: auto`。别硬缩，缩了看不清。

按钮要够大。手指比鼠标粗，至少44像素见方。挨太近容易点错。

测试别偷懒。浏览器开发者工具里有设备模拟，先看个大概。真机也得试，安卓和苹果的显示不一样。把窗口拉宽拉窄，看哪里先崩。崩的地方，就是下一个断点。

最后呢记住：响应式不是加个meta标签就完事。每写一块，就把窗口缩小看看。挤了就改，改了再看。手机能读、能点、不横着滚，这网站才算成了。