先记住一句话：响应式网站不是另做一个手机版，是同一套代码自己会变形啊。下面直接动手。

第一步，HTML里加一行viewport。不加这行，手机浏览器会假装自己是电脑，页面缩成一团。

html

就这么简单。意思是：页面宽度跟着设备走，初始缩放为1。

第二步，别写死宽度。`width: 960px`这种写法，在手机上必然溢出。改用百分比或`max-width`：

css
.container {


max-width: 960px;


margin: 0 auto;


padding: 0 16px;


}

`max-width`的意思是：有空间就撑到960，没空间就缩着。左右各留16px，手指点边缘按钮不发飘。

第三步，用媒体查询换布局。别一上来就写一堆断点。先看你的在哪个宽度开始挤，就在哪里断。

css
/ 默认手机优先 /


.card { width: 100%; }


/ 屏幕够宽了，排成两列 /


@media (min-width: 640px) {


.card { width: 50%; }


}

注意`min-width`从窄往宽写，这叫移动优先。好处是你先伺候好小屏幕，再加宽屏幕的规则，逻辑不打架。

第四步，图片别撑破容器。

css
img {


max-width: 100%;


height: auto;


}

两行。第一行说图最宽不超过爹，第二行说高度跟着等比缩，别压扁。

第五步，字号别用px死磕。用`rem`，根元素字号随屏幕稍微变一变：

css
html { font-size: 16px; }


@media (min-width: 768px) {


html { font-size: 17px; }


}

用`2rem`，正文用`1rem`，整体跟着走，不用挨个调。

第六步，导航栏这种横排的，窄屏要改成竖排。不用JavaScript，媒体查询就能干：

css
nav ul { display: flex; flex-wrap: wrap; }

`flex-wrap: wrap`的意思是：放不下就自动换行。一行放三个链接，到手机上变成三行，干净。

第七步，测试。别只拉窄浏览器窗口。用手机真机点一遍，或者开发者工具里开设备模拟。重点看三样：有没有横向滚动条、按钮点不点得准、字会不会小到眯眼。横向滚动条基本就是某元素超宽了，用`outline: 1px solid red`挨个排查。

最后一点说个大坑：别用`position: fixed`做底部栏然后忘了留padding，会被盖住。加个`padding-bottom`就行。

再补一句，别装一堆框架。上面这几十行CSS够撑起一个正常网站。框架能省事，但先明白原理，不然出问题你连从哪查都不知道。

按这个顺序做：加viewport、写百分比宽度、媒体查询换列、图片自适应。四步做完，网站就能自己适配手机。