先说结论：响应式网站不是“高级版”，是“标配版”。手机流量早就超过电脑，你的网站还在让用户两根手指放大缩小？该改了。

第一步：扔掉固定宽度

很多人写CSS习惯写`width: 1200px`。电脑上看挺整齐，手机上一打开，横向滚动条直接劝退。正确做法是用百分比或`max-width`。比如：

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


}

意思是：小屏幕就占满，大屏幕最多1200px，居中。一行代码解决大半问题。

第二步：图片别撑破布局

图片是最容易出事的元素。加一句：

css
img {


max-width: 100%;


height: auto;


}

图片永远不会超出父容器。就这么简单。

第三步：媒体查询，该变就变

响应式的核心就仨字：媒体查询。在CSS里写：

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


.nav { flex-direction: column; }


}

屏幕窄于768px时，导航从横排变竖排。手机上手指点竖排菜单舒服，横排挤成一团根本点不准。

断点不用太多，两三个够用：手机一个、平板一个、桌面默认。别整五六个断点，维护起来自己都晕。

第四步：字体也要跟着变

电脑上18px正文刚好，手机上18px占屏比例太大。用`rem`或`clamp()`：

css
body {


font-size: clamp(14px, 1.5vw, 18px);


}

屏幕小字体自动缩小，屏幕大自动放大，中间有个范围兜底。

第五步：viewport元标签别忘

HTML头部加这行：

html

没这行，前面全白干。手机浏览器会假装自己是980px宽的屏幕，你的响应式代码根本不触发。

第六步：真机测试

浏览器开发者工具那个手机模拟，只能看个大概。真拿手机打开试试，手指头点得到按钮吗？文字看得清吗？横屏呢？模拟器不会告诉你手指点不中的痛苦。

最后一点说个坑

别用`position: fixed`做大面积固定元素。手机屏幕本来就小，固定导航占掉三分之一，用户还看什么？固定元素只留给小按钮或底部小工具条。

响应式网站说白了就一句话：让页面自己适应屏幕，别让用户适应页面。上面六步走完，基本能跑。剩下的细节边做边调，比看十篇教程管用。