先看一个常见问题：网页在电脑上好好的，一到手机上字小得看不清，还得左右滑呗。这就是没做响应式。

响应式说白了就一句话：网页能根据屏幕大小自动调整布局。下面直接上手。

第一步，加一行meta标签

在HTML的head里加上：

``

不加这行，手机浏览器会把页面当成电脑版缩放着显示。加了之后，页面宽度就跟手机屏幕一样宽了。

第二步，别写死宽度

新手最爱写`width: 960px`。屏幕窄了直接溢出。改成`width: 100%`或`max-width`。图片加一句`max-width: 100%; height: auto;`，它就会自己缩。

第三步，用媒体查询换布局

这是响应式的核心。比如桌面端三栏，手机端一栏：

css
.container { display: flex; }


@media (max-width: 768px) {


.container { flex-direction: column; }


}

意思是：屏幕宽度小于768像素时，把横排改成竖排。断点不用多，768和1024两个够用了。

第四步，字号和间距也跟着变

手机上字号别小于16px，不然看着累。间距用`rem`或百分比，别全用`px`。按钮在手机上要大一点，手指点得准。

第五步，测试

浏览器按F12，点那个手机图标，切换不同机型看效果。重点看三处：有没有横向滚动条、文字会不会挤成一团、按钮好不好点。

几个坑提前说

别用`position: fixed`做底部导航，手机上键盘弹出来会挡住。表格在手机上很难看，要么横滑要么改成卡片式。还有，别迷信框架，自己写几十行CSS就能搞定的事，没必要引一整套库。

末了说一条：先做手机版，再往大屏扩。这叫移动优先。反过来做，你总会漏掉小屏上的细节。

动手改一个旧页面试试，比看十篇教程管用。