先看一个真事。上周朋友发来个链接，说客户投诉手机打开排版全乱。我点开一看，桌面端挺漂亮，手机上字挤成一条线，按钮点不到。问他咋做的，他说页面写死了1200px宽。

这不是响应式。这叫“在电脑上能看”。

响应式说白了就一句话：同一个页面，自己适应屏幕大小。不用单独做m站，不用判断设备跳转。下面按顺序走一遍。

第一步，加viewport。 打开HTML文件，head里塞这行：

``

没这行，手机浏览器会假装自己是980px宽的屏幕，后面全白搭。这是很多新手第一个坑。

第二步，扔掉固定宽度。 翻你的CSS，把 `width: 1200px` 这种全找出来。容器用 `max-width` 配 `width: 100%`，图片加 `max-width: 100%; height: auto`。就这两条，手机上的横向滚动条基本就没了。

第三步，用断点，别用设备判断。 媒体查询长这样：

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


}

768px是个常见分界，平板竖屏以下生效。断点不用多，两三个够用：手机一个、平板一个。别去查iPhone多少像素，那玩意儿年年变。按什么时候开始挤来定断点，准没错。

第四步，布局换思路。 桌面端三栏并排，手机上就老老实实竖着排。Flexbox几行搞定：

.container { display: flex; flex-wrap: wrap; }
.card { flex: 1 1 300px; }

意思是卡片最小300px，放不下自动换行。不需要写一堆媒体查询。

第五步，触摸友好。 按钮和链接，手指点得中才行。最小点击区域44px见方，间距别太抠。字体正文别小于16px，不然iOS上输入框聚焦会自动放大页面，体验很怪。

第六步，真机测。 浏览器开发者工具里的设备模拟能看个大概，但不够。拿自己手机打开，横竖屏都转一下，输入框点一下，滚动试一下。问题往往出在你没想到的地方。

还有提醒一句：响应式不是加几个媒体查询就完事。核心是布局本身有弹性——用百分比、用flex、用grid，让自己找位置。做完之后把浏览器窗口从宽拖到窄，一路顺滑不变形，就成了。