会伸缩的网页最好命：响应式 layout 懒人笔记

11-12 92 0 0

别被“响应式”三个字吓到，它其实就是让网页像橡皮筋一样，不管手机、平板还是 27 寸大屏，都能自动撑满最合适的样子。下面这份笔记把我踩过的坑浓缩成几页纸，跟着抄代码就能跑，顺路告诉你为什么省下的维护时间足够多喝三杯奶茶。

1. 先弄清楚三件事

HTML 管结构，好比搭积木；
CSS 管颜值，负责让积木看起来顺眼；
视口（viewport）就是浏览器窗口大小，手机从竖屏切到横屏，它也跟着变。

把视口 Meta 标签往 <head> 里一丢，后面所有魔法才生效：

<meta name="viewport" content="width=device-width, initial-scale=1">

2. 一行代码让导航“弯腰”

先看成品：
大屏时菜单横着躺，屏幕小于 600 px 时自动叠成一排按钮，无需插件、无需 JS，全靠 CSS 媒体查询。

/* 默认横排 */
nav li { display: inline-block; margin: 0 15px; }

/* 600px 以下自动叠 */
@media (max-width: 600px) {
  nav li { display: block; margin: 8px 0; }
}

把这段扔进去，手机浏览器瞬间清爽，连你妈都能一眼找到“联系我们”。

3. 图片别再“撑爆”版面

老式写法固定像素，手机端常常溢出边框。改成百分比或 max-width: 100%，图片会乖乖缩到跟屏幕一样宽，高清又省流：

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

4. 相对单位才是真正的偷懒神器

px 写死之后，换个设备就翻车；%、vw、em 这些相对单位能让元素自己“长”或“缩”。
例如：

.container { width: 90%; margin: 0 auto; }

不管 320 px 的老人机还是 4 K 显示器，左右永远留 5% 空白，版面稳得像老司机。

5. 自测三步走，别再等测试同学

浏览器 F12 切手机/平板模式，看断点有没有断干净；
把窗口随意拖到奇形怪状，检查文字是否压行、图片是否变形；
真机扫一遍：iPhone 开横屏、安卓开暗黑模式，能早发现问题就早下班。

6. 小结（没有“综上所述”）

响应式不是高大上，而是“写一次，少改 bug”的实用技能。把视口、媒体查询、相对单位这三板斧玩顺，你就能让网页在任何屏幕上都能体面地出现。剩下的时间，去撸猫也好，去喝奶茶也行——反正维护工作量真的变少了。

快来点个赞吧

编程知识