先写手机版，再管电脑哟。

很多人做网站反过来，先做大屏，最后一点缩到手机，结果到处错位。正确做法：打开编辑器，窗口拉到最窄，先让页面在手机上正常显示。窄屏排好了，宽屏只是加空间，简单得多。

第一步，加一行meta标签。

在head里写：

没这行，手机浏览器会把页面当电脑版缩小，字小得看不清。加了它，页面宽度等于手机屏幕宽度，一切从真实尺寸开始。

第二步，别写死宽度。

别给容器写width: 960px。改成max-width: 960px，再配width: 100%。这样小屏自动缩，大屏最多960。图片也一样，加max-width: 100%，height: auto，图就不会撑破屏幕。

第三步，用flex排版，少用float。

一行几个卡片，父元素写display: flex，再写flex-wrap: wrap。子元素给个flex: 1 1 280px，意思是“至少280像素宽，能挤就挤，挤不下就换行”。手机上一列，平板上两列，电脑上三列，全靠浏览器自己算，不用写一堆媒体查询。

第四步，媒体查询只处理真正的问题。

大部分布局用上面的法子已经能自适应。剩下的，比如手机上导航要收起来，电脑上要横排，这才用媒体查询：

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

断点别贪多，两三个就够。常见的是768和1024。先写手机样式，媒体查询里写大屏的覆盖，这叫移动优先。反过来写也行，但容易漏。

第五步，字和按钮要够大。

手机手指粗，按钮高度至少44像素，正文不小于16像素。行高给1.5到1.6。别用px写死字号，用rem，根字号设16px，后面好调。

第六步，真机测试。

浏览器开发者工具里有设备模拟，但模拟不等于真机。拿自己的手机打开，横竖屏都转一下，看看哪里溢出、哪里点不到。发现横向滚动条，多半是某个元素超宽了，给它加max-width: 100%或者overflow-x: hidden先堵住，再找根源。

最后一点说个坑：表格和长单词。

表格在手机上会撑破布局，给它套个div，设overflow-x: auto，让它自己横向滚。长网址或长英文单词不换行也会撑破，给文本容器加overflow-wrap: break-word。

按这个顺序做：先窄屏，加viewport，宽度用百分比和max-width，布局靠flex，媒体查询补漏，最后一点真机走一遍。一个能用的响应式网站就成了。不复杂，关键是别一上来就想着电脑。