做网站先记住一句话：手机上有问题，电脑上再好看也白搭呢。

别急着写代码。先拿一张纸，画三个框：手机、平板、电脑。每块写下最重要的放在哪。顺序排好，后面所有工作都围绕这张纸来。

第一步，搞定视口。在网页头部加一行：

没有这一行，手机浏览器会把网页当成电脑版缩小显示，字小得没法看。加了它，页面宽度才和手机屏幕一致。

第二步，让图片和视频自适应。给图片加上一行最简单：

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

图片就再也不会把手机屏幕撑破。视频同理，宽度设成100%。

第三步，别给容器写死宽度。把 width: 960px 这种写法换成 max-width: 960px。这样大屏撑得开，小屏缩得回。

第四步，用媒体查询安排不同断点。常用的是三段：手机默认样式先写，屏幕变宽了再加规则。比如：

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

先写手机样式，等于逼自己先想清楚移动端。这叫移动优先，写起来最顺手。

第五步，布局改用弹性盒或者网格。导航栏在手机上竖着排，屏幕变宽后横着排，用flex-direction一切就行。卡片列表用grid，一行放几个随屏幕自动变。

第六步，字体和按钮别抠门。手机上正文不小于16像素，按钮高度至少44像素，手指才点得中。链接之间留出空隙，别挤成一片。

第七步，隐藏要想清楚。别把电脑上的侧边栏直接display: none完事，重要信息不能丢。该折叠的用菜单收起来，但得让用户找得到。

第八步，测试。浏览器按F12，切到手机模式，从窄到宽拖一遍。真正拿手机看一遍，竖屏横屏都试。找朋友用不同尺寸的手机点一点，比你对着模拟器看一小时管用。

最后一点提醒一句：响应式不是把页面等比缩放，是自己重新排队。写之前想好顺序，写的时候少用死数值，多用百分比和max-width，大部分问题自然就没有了。