你有没有过这种经历？手机打开一个网站，字小得跟蚂蚁似的，得两根手指拼命放大啊。或者页面乱成一锅粥，按钮点不到，广告弹窗挡得严严实实。

这网站就是没做响应式。老板骂你，用户更骂你。今天不扯高大上的概念，就说说怎么把手头的网站改得让手机、平板、电脑都看着舒服。

第一步：先把那个“viewport”写了

打开你的HTML文件，在``标签里加一行：

``

不加这行，手机浏览器会假装自己是电脑屏幕，把整个页面缩得小小的。加了之后，浏览器才知道：“哦，这网站是给手机看的，宽度按手机来。”

第二步：别把宽度写死

新手最爱干的事：`width: 960px`。电脑上没问题，手机上直接溢出。

把固定宽度换成百分比或者`max-width`。比如：

`.container { max-width: 1200px; width: 100%; }`

意思就是：最宽1200像素，但屏幕小的时候你自动缩。这一招能解决大半的排版错乱。

第三步：图片得学会自己懂事

一张大图放电脑上好看，放手机上能把页面撑爆。给图片加两行CSS：

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

图片最大不超过容器宽度，高度按比例自己算。再也不用写死图片尺寸了。

第四步：媒体查询——换个屏幕就换个规矩

这是响应式的核心。你告诉浏览器：屏幕小于768像素时，用另一套样式。

`@media (max-width: 768px) { .sidebar { display: none; } }`

手机上把侧边栏藏起来，电脑上正常显示。就这么简单。断点别搞太复杂，一般768、480、1200这几个就够了，多了自己都记不住。

第五步：字体别用px，用rem

`16px`在电脑上正常，手机上看着难受。改成`1rem`，然后控制根元素字号：

`html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 14px; } }`

所有用rem的地方自动跟着缩，省心。

第六步：别用绝对定位搞布局

`position: absolute`在响应式里就是个坑。屏幕一变，元素飞得到处都是。老老实实用flexbox或者grid。

`display: flex; flex-wrap: wrap;`

子元素放不下自动换行。三列变两列变一列，浏览器帮你算。

还有一步：拿真手机测

别光用浏览器开发者工具调。用你自己的手机打开看一遍，手指点一点按钮，滑一滑页面。工具里看着没问题，真机上可能按钮太小点不着。

按钮最小高度44像素，这是手指能舒服点到的底线。

做完这几步，你的网站至少不会让手机用户摔手机了。响应式不是什么高深技术，就是替用户多想一步的事。