先看一个数：超过一半的访客是用手机打开你网站的啊。如果你的网站在手机上要放大缩小、按钮点不着、文字挤成一团，人扭头就走。响应式网站就是解决这个问题的——同一套代码，手机、平板、电脑自动适配。

做起来不难，按下面几步走。

第一步，加一行meta标签。 在HTML的head里写：

html

没有这行，手机浏览器会假装自己是电脑，把页面缩成一小块。加上它，页面宽度才等于手机屏幕宽度。这是所有工作的前提，别忘了。

第二步，别用固定像素排版。 新手常写 `width: 960px`，在电脑上刚好，手机上直接溢出。改成百分比或者弹性单位：

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

宽度跟着屏幕走，但最大不超过1100px，大屏上也不会撑得难看。

第三步，图片要听话。 给图片加一句 `max-width: 100%; height: auto;`。图片就永远不会超出容器，也不会被拉变形。

第四步，用媒体查询换布局。 这是响应式的核心。手机竖屏就一列，屏幕宽了再变两列、三列：

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


.cards { display: flex; }


}

先做手机版，再往大屏加东西。这叫移动优先，写起来更省事，因为手机版最简单。

第五步，字体和点击区域要照顾手指。 正文字号别小于16px，手机上勉强能看清。按钮和链接的点击区域至少44×44像素，手指没鼠标那么准，太小了根本点不上。

第六步，导航栏做折叠。 电脑上横排的菜单，手机上塞不下。收起成一个汉堡按钮，点开再展开。这需要一点JavaScript，但逻辑很简单：点按钮，给菜单加个显示类，再点一下去掉。

最后呢，真机测试。 别只在电脑上拖动窗口看效果。拿自己的手机打开，走一遍主要流程：能不能正常滚动、按钮好不好点、表单能不能填。电脑上缩窗口和真手机是两回事。

几个常见的坑：

忘了加viewport标签，前面全白做。

表格和长代码块在小屏上溢出，给它们套一个 `overflow-x: auto` 的容器。

固定定位的弹窗在手机上盖住半个屏幕，记得限制最大高度。

就这样。响应式不是高深技术，核心就一句话：布局跟着屏幕变，始终看得清、点得着。照着上面做，一个下午就能把现有页面改造成手机友好的样子。