做网站最烦什么？手机打开电脑版，字小得像蚂蚁，用户两秒就关。以前解决办法是单独做个手机站，两套代码，改一处两边都得动，累死。

响应式就是一套代码，屏幕多大就长多大。下面说人话，讲清楚怎么弄。

第一步，先管住视口

在网页头部加一行代码：

html

这行是告诉手机：别自作主张缩放，按设备实际宽度来。不加这行，后面全白搭。

第二步，图片和文字别写死

电脑上图片宽800像素没问题，手机上就撑爆了。给图片加一句：

css
img { max-width: 100%; height: auto; }

意思是：最大不超过容器宽度，高度自己算。文字也一样，别用固定像素，用相对单位。正文16px起步，手机上看着舒服。

第三步，布局用弹性盒子

以前用float排版，现在用flex。一行放三个卡片，写：

css
.container { display: flex; flex-wrap: wrap; gap: 16px; }


.card { flex: 1 1 280px; }

`flex-wrap`让卡片放不下时自动换行，`flex: 1 1 280px`意思是每张卡至少280像素宽，空间够就平分，不够就往下掉。手机上一列，电脑上三列，代码不用改。

第四步，媒体查询做微调

flex解决大部分问题，但有些地方得手动调。比如导航栏，电脑上横排，手机上得藏起来变汉堡菜单。

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


.nav { display: none; }


.menu-btn { display: block; }


}

768像素是个常用分界点。别设太多断点，两三个够了。多了维护起来想哭。

第五步，手机上真机看

浏览器开发者工具能模拟手机，但不准。字体渲染、触摸区域大小，只有真机看得出来。按钮至少44像素高，手指点得中。链接之间留够间距，别让用户误触。

几个坑提前说

别用`position: fixed`做底部导航，iOS键盘弹出来会乱飘。表格别硬塞，手机上横向滚动都比挤成一团强。视频用`width: 100%`，别设固定高度。

最后呢，响应式不是做完就完事。新加进去，回头用手机再刷一遍。网站是给人用的，用户在哪，你就得在哪看着舒服。