先看效果。电脑上三栏并排，手机上竖着排。字别太小，按钮手指点得中。这就是响应式网站：一套代码，屏幕大小自动变。

第一步，加viewport。在head里写一行：

``

没这行，手机上页面会缩成一小团。

第二步，别写死宽度。`width: 960px`这种写法扔掉。改用百分比、`max-width`、`flex`。图片加`max-width: 100%`，不然会撑破屏幕。

第三步，用媒体查询。想好断点：手机、平板、电脑。简单点，768px和1200px够用。

@media (max-width: 768px) {
.col { width: 100%; }


}

意思很直白：屏幕窄于768像素，栏改成一列。

第四步，字体和按钮跟着缩放。字号用`rem`，别用`px`。按钮高度至少44像素，手指才戳得准。行距松一点，手机上密密麻麻没人看。

第五步，导航要变。电脑上横排，手机上折进汉堡菜单。汉堡菜单不难，一个按钮加一段CSS，点一下展开。别做花哨动画，能点开就行。

动手顺序：先写手机样式，再往上加。这样最省事。电脑端只是补充，不是重做。

测试方法很笨但管用：打开浏览器，按F12，拖窄窗口。哪块挤了、叠了、字出框了，当场改。再拿真手机看一遍。模拟器和真机不一样，尤其触摸和字体渲染。

常见坑说三个。一，表格别硬塞，手机上改成卡片或横向滚动。二，长单词会撑破容器，加`word-break: break-word`。三，视频用`width: 100%; height: auto`，不然比例乱。

最后一点一条：别追求完美适配所有设备。主流手机和电脑屏幕覆盖到，就够了。剩下的小屏、折叠屏，能看就行。

响应式不是玄学。核心就一句：让页面自己适应，别让用户歪着脖子找。