做网站，别一上来就写死宽度。你拿手机打开自己做的页面，字小得要放大镜，按钮点不着，那就是没做响应式。

响应式说白了就一句话：同一个页面，在不同大小的屏幕上都能看、都好用。不用给手机单独做个网站，一套代码全搞定。

第一步，先加这行代码。它告诉浏览器：页面宽度跟着设备走，别自作主张缩放。

html

不加这行，后面全白搭。

第二步，别用固定像素。以前很多人写 `width: 960px`，大屏看着还行，手机直接溢出。改成百分比或者 `max-width`：

css
.container {


width: 90%;


max-width: 1200px;


margin: 0 auto;


}

这样小屏占九成宽，大屏最多一千二，两边留白，居中。

图片也一样。给它加一条：

css
img {


max-width: 100%;


height: auto;


}

图片不会撑破容器，也不会被压扁。

第三步，布局别硬扛。手机上竖着排，电脑上横着排，用 Flexbox 最简单：

css
.row {


display: flex;


flex-wrap: wrap;


gap: 20px;


}


.row > div {


flex: 1 1 280px;


}

`flex-wrap: wrap` 是关键。放不下就换行，不需要你算屏幕宽度。每个方块最小 280px，屏幕窄了自己往下掉。三栏变两栏，两栏变一栏，全自动。

第四步，字体别写死。正文用 `1rem`，用 `1.5rem` 或者 `2rem`。`rem` 跟着根字号走，用户调大字体，你的页面跟着变。别用 `px` 锁死，看着精细，实际上不友好。

第五步，媒体查询兜底。有些地方 Flexbox 搞不定，比如导航栏。手机上要折叠，电脑上要展开。这时候用媒体查询：

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


.nav {


display: none;


}


.menu-btn {


display: block;


}


}

768px 是个常用断点，平板和手机基本都在这以下。但别迷信这个数，你打开开发者工具，拖一拖窗口，看在哪儿挤了、在哪儿丑了，就在哪儿打断点。断点跟着走，不是跟着设备走。

第六步，测试。写完别只在电脑上看。浏览器按 F12，点那个手机图标，选几个常见尺寸拖一拖。更靠谱的是拿真手机打开，手指点一点，看按钮够不够大，字会不会挤成一团。

最后一点说个坑。有人觉得响应式就是加几个媒体查询，结果写了一堆断点，维护起来要命。其实大部分布局 Flexbox 和 Grid 就能自适应，媒体查询只用来处理真正需要变结构的地方。能少写就少写。

还有，别一上来就上框架。Bootstrap、Tailwind 是好东西，但你先搞明白媒体查询和 Flexbox，再上工具。不然出了问题你连改哪儿都不知道。

响应式不难，难的是忍住不写死宽度。从今天起，把 `px` 换成 `%` 和 `rem`，把 `float` 换成 `flex`，你的网站就能自己适应屏幕了。