先记住一句话：响应式网站，就是一套代码，手机、平板、电脑都能看。

以前做网站，电脑一个版本，手机一个版本，维护起来累死人。现在不用了。下面说具体怎么做。

第一步，加一行meta标签

打开HTML文件，在head里加上：

这行代码告诉浏览器：别自作主张缩放，按设备实际宽度来。漏了这行，手机上看到的就是缩小的电脑版。

第二步，放弃固定宽度

别写width: 960px这种死数字。改成百分比或者max-width。

比如容器写成：

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

这样屏幕小的时候占90%，大了最多1200px，两边自动留白。

第三步，图片要听话

给图片加一句：

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

意思是图片最宽不超过容器，高度自动算。别写死宽高，不然手机上一半图片被切掉。

第四步，用媒体查询断点

这是响应式的核心。简单说，就是“屏幕小于某个尺寸时，换一套样式”。

常见断点：

@media (max-width: 768px) { ... } 平板和手机

@media (max-width: 480px) { ... } 小手机

在断点里改什么？改布局。电脑上三栏并排，手机上就改成一栏竖着排。写法：

@media (max-width: 768px) {

.column { width: 100%; }

}

第五步，导航栏单独处理

导航是最容易出问题的地方。电脑上一排横着，手机上挤不下。常见做法是手机上收进一个按钮，点开才显示。这个需要几行JavaScript，网上模板很多，直接搜“响应式导航栏代码”就能找到，改改文字就能用。

也可以用纯CSS的checkbox方案，不写JS也行，适合新手。

第六步，文字别太小

手机上正文至少16px。按钮和链接的点击区域至少44×44像素，手指才点得准。别为了“精致”把字缩到12px，用户得眯着眼看。

第七步，测试

写完别只在电脑上拉窗口看。用浏览器开发者工具，按F12，点那个手机图标，能模拟各种屏幕。但模拟归模拟，最好拿真手机打开看一眼。有些问题模拟器看不出来。

几个常见的坑

• 忘了meta标签，前面说了
• 用了绝对定位，元素跑出屏幕
• 表格没做处理，手机上撑破布局。表格可以加overflow-x: auto让它能横向滚
• 视频写死宽度，跟图片一样，加max-width: 100%

末了说说一句

响应式不难，核心就三件事：百分比代替固定宽度、媒体查询换布局、图片和文字自适应。把这几样做好，大部分网站够用了。别一上来就追求完美，先让页面在小屏幕上能正常看，再慢慢调细节。