手机流量早就超过电脑了呗。你的网站还在让用户两根手指放大缩小？今天聊聊响应式，不整虚的。

先搞清楚一件事

响应式不是“再做个手机版”。那叫两套代码，维护起来要命。响应式是一套代码，自己会变。屏幕宽了排三列，窄了排一列，图片跟着缩。

第一步，加这句

打开HTML文件，head里加：

html

没这句，手机浏览器会假装自己有980px宽，然后缩给你看。字小得跟蚂蚁似的。

第二步，别写死宽度

新手最爱写`width: 960px`。手机屏幕才375px，直接溢出。

改成`max-width`。容器用百分比或者`max-width: 1200px`。图片加一句`max-width: 100%; height: auto;`，让它自己缩。

第三步，媒体查询

这是响应式的核心。语法就一句：

css
@media (max-width: 768px) {


/ 手机样式 /


}

意思很简单：屏幕小于768px时，用这里的规则。常见断点：768px平板，1024px小笔记本。别设太多断点，两三个够用。

第四步，布局换思路

电脑上用float或者flex排三列，手机上必须变一列。

最省事的办法：flex加`flex-wrap: wrap`。子元素写`flex: 1 1 300px`，意思是“最小300px，放不下就换行”。一行代码搞定大部分场景。

第五步，字体和按钮别太小

正文最小16px。手机上看12px的字，眼睛要瞎。按钮高度至少44px，手指头不是鼠标箭头。

第六步，测试

别只在Chrome里拖窗口。F12打开开发者工具，点那个手机图标，选iPhone SE试试——那是小屏极限。再看看iPad。

有条件拿真手机开一下。模拟器有时候骗人。

常见坑

导航栏在手机上挤成一坨。解决办法：小屏时藏起来，换个汉堡按钮。用checkbox加label就能纯CSS实现，不用JS。

表格在手机上溢出。给外层加`overflow-x: auto`，让它横向滚，别硬压。

最后一点

响应式没那么玄。核心就三样：viewport声明、弹性布局、媒体查询。剩下的都是细节打磨。

先让网站在手机上能正常看，再谈好看。顺序别搞反。