打开你手机上的浏览器，随便进一个网站。如果字小得要用两根手指放大，页面左右乱滑，那这网站就是没做响应式。响应式说白了就一句话：同一个网页，在手机、平板、电脑上都能正常看，不用你单独做三个版本。

先说骨架。页面头部加一行代码：

html

没这一行，手机浏览器会把网页当成电脑屏幕来渲染，然后硬缩到手机宽度，字就成蚂蚁了。加上它，浏览器才知道按设备实际宽度来排版。

接着定布局。别写死像素。宽度用百分比，图片设成 `max-width: 100%`，让它随容器缩小。以前大家爱用 `float` 排版，现在直接用 Flexbox。比如导航栏：

css
nav { display: flex; flex-wrap: wrap; }

`flex-wrap: wrap` 是关键——空间不够时，子元素自动换行，不会挤成一团。

真正让布局"变形"的是媒体查询。写在 CSS 最后呢：

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


nav { flex-direction: column; }


}

意思是屏幕窄于 768 像素时，横向导航改成竖向排列。平板一个断点，手机一个断点，两三个够了。别一上来写七八个，维护起来想死。

字号也别用 `px`。用 `rem`，根元素定好基准，比如 `html { font-size: 16px }`，写 `2rem`。手机上看嫌大？媒体查询里把根字号调小，全局跟着变。

还有个坑：表格和长代码块老是撑破布局。给它们套一层 `overflow-x: auto` 的容器，宽出的部分横向滚动，页面不会被顶歪。

最后呢，写完一定要真机测。浏览器开发者工具里的手机模拟只能看个大概，真机上字体渲染、点击区域大小都不一样。手指点按钮，48 像素见方才不容易误触。

顺序捋一遍：加 viewport 标签，布局用百分比和 Flexbox，图片限宽，媒体查询调结构，字号用 rem，容器兜住溢出，真机验证。完事。