做网站，先想清楚一件事：用户不一定用电脑打开。手机、平板、电脑，屏幕大小差得远。响应式就是让同一个网站，在哪块屏上都好看、好点。

第一步，加一行代码。在网页头部写上 ``。没这行，手机浏览器会把网页当成电脑版缩着显示，字小得看不清。这行告诉浏览器：按设备实际宽度来。

第二步，别写死宽度。以前做网页习惯写 `width: 960px`，现在改成百分比或者 `max-width`。比如区写 `max-width: 1200px; width: 100%`，大屏不撑太宽，小屏自动缩。

第三步，用媒体查询分档处理。CSS里写：

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


}

意思是屏幕窄于768像素时，隐藏横向导航。档位不用太多，两三个就够：手机一档，平板一档，桌面一档。写多了自己都乱。

第四步，图片要听话。给图片加 `max-width: 100%; height: auto;`，图片就不会撑破容器。有条件的用 `srcset` 给不同屏幕配不同尺寸的图，手机别下大图，省流量也快。

第五步，布局用弹性盒子或网格。`display: flex` 让元素自动换行、自动分配空间，比死磕浮动省心得多。卡片列表用 `flex-wrap: wrap`，窄屏自动堆成一列。

第六步，字体和按钮别太小。手机上正文至少16像素，按钮高度别低于44像素，手指点得准。行距放宽一点，小屏读着不累。

第七步，真机测试。浏览器开发者工具能模拟手机，但不准。拿自己的手机打开看看，横屏竖屏都转一下。点按钮、填表单，看有没有点不到、撑出横向滚动条的地方。

常见坑有三个。一是忘了viewport那行，白忙活。二是表格和长代码块撑破布局，给它们套个 `overflow-x: auto` 的容器。三是固定定位的广告条挡住，手机上干脆别放。

还有记住：响应式不是做两套网站，是一套代码适应不同屏幕。先保证手机能用，再往上加宽屏效果。顺序别反。