做网站的人常犯一个错：PC端一套代码，手机端另一套。维护起来要命。响应式设计就是解决这个问题的——一套代码，屏幕大小随便变，页面自己调整。

下面直接开干。

第一步：加viewport

打开HTML，在head里塞这一行：

html

没这行，手机上页面会缩成蚂蚁大小。先加它，再说别的。

第二步：别写死宽度

新手最爱写`width: 1200px`。屏幕窄了就出横向滚动条。改成`max-width: 1200px; width: 100%`。图片也一样：`img { max-width: 100%; height: auto; }`。

记住一个原则：宽度用百分比或max-width，别用固定像素。

第三步：媒体查询

这是响应式的核心。CSS里写：

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


.nav { flex-direction: column; }


.sidebar { display: none; }


}

意思是：屏幕宽度小于768px时，导航竖着排，侧边栏藏起来。断点不用太多，768和1024两个基本够用。多了反而乱。

第四步：用Flexbox或Grid布局

别用float了，那是上个时代的东西。Flexbox做一维排列，Grid做二维。比如三栏布局：

css
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }


@media (max-width: 768px) {


.container { grid-template-columns: 1fr; }


}

桌面三列，手机一列。代码就这几行，干净。

第五步：字体和按钮也要跟着变

手机上字号别太大：`font-size: clamp(16px, 2vw, 20px)`。按钮触摸区域至少44px高，否则手指点不准。

第六步：真机测试

浏览器开发者工具里按F12，开设备模拟。但模拟不等于真机。拿自己手机打开看看，该点的点，该滑的滑。问题往往出在模拟器里看不出来的地方。

一个常见坑

忘了加`box-sizing: border-box`。加上它，padding和border算在宽度里，布局不乱：

css

{ box-sizing: border-box; }

就这六步。不用框架，不用插件，原生CSS就能搞定。先从一个小页面练手，改到手机上看，调几次就熟了。