做网站先想清楚一件事：别人用什么看你的网站？手机罢了。大概率是手机。

所以别一上来就折腾电脑端布局。先打开你的设计稿，把浏览器窗口拖窄，拖到跟手机差不多宽。如果这时候页面还像回事儿，再继续往下做。

这就是响应式网站最朴素的思路：一套代码，屏幕宽窄都能自适应。

别写死宽度

新手最容易犯的错，给每个盒子定死像素宽度，比如 `width: 960px`。电脑上看挺整齐，手机上一打开，要么横向滚动条，要么挤成一坨。

改成百分比或者 `max-width`。容器写 `width: 100%; max-width: 1200px;`，小屏幕铺满，大屏幕封顶。就这么简单。

图片同理。加一句 `img { max-width: 100%; height: auto; }`，图片永远不会撑破容器。

断点别设太多

媒体查询是响应式的核心工具，但没必要搞五六个断点。两到三个够用了。

常见做法：

• 默认样式给手机写
• `@media (min-width: 768px)` 处理平板
• `@media (min-width: 1024px)` 处理桌面

先写手机端，再往上加。这叫移动优先。好处是你不用费劲删减电脑端的复杂布局，而是从小往大做加法。

用 flex 和 grid，别用 float

都2024年了，别再用 `float` 排版。`display: flex` 处理一维排列，导航栏、按钮组、卡片横排，几行代码搞定。`display: grid` 处理二维布局，整页分栏特别顺手。

这俩天生就是响应式的好搭档。配合 `flex-wrap: wrap`，空间不够自动换行，连媒体查询都省了。

字体和点击区域

手机上正文至少 16px。别用 12px，看着费劲。

按钮和链接的点击区域别太小。手指不是鼠标指针，至少留 44px 的高度。两个可点击元素之间留点空隙，不然用户老点错。

测试，别猜

写完拖着浏览器窗口来回缩放，看哪里崩了。Chrome 开发者工具里有个手机图标，点一下就能模拟各种机型。别光看 iPhone，找个窄屏安卓机型的尺寸试试。

真机测试更靠谱。拿你自己的手机打开，手指头戳一戳，比在电脑上模拟强一百倍。

收尾

响应式不是什么高深技术。核心就一句话：别跟屏幕尺寸较劲。让布局自己适应，而不是给每种屏幕写一套。

做完上面这几步，你的网站基本就能在各种设备上正常看了。剩下的是细节打磨，慢慢来。