响应式设计需容器、字体、图片各自弹性伸缩，禁用transform:scale()；viewport标签必须正确设置；容器用max-width+百分比；字体优先rem配合clamp()；图片设max-width:100%和height:auto。
响应式不是靠“等比缩放整个页面”实现的，而是靠容器、字体、图片各自按需弹性伸缩——强行给 html 或 body 加 transform: scale() 会破坏点击区域、表单焦点、媒体查询断点，属于典型反模式。
viewport 标签写错，所有响应式都白搭
媒体查询生效的前提是浏览器正确识别视口。没它，手机上看到的是桌面版缩略图；写错了，比如 width=1200 或 user-scalable=no，会导致双击放大失效、输入框聚焦错位。
- 必须用：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁用
maximum-scale=1.0：iOS Safari 会锁死缩放，视障用户无法放大阅读 - 不要加
shrink-to-fit=yes：这是旧版 Safari 私有属性，现代浏览器已废弃
容器宽度别用固定 px，用 max-width + 百分比组合
写死 width: 1200px 在小屏上必然横向滚动；只写 width: 100% 又会在大屏上撑满导致文字过长难读。真实项目中要兼顾“弹性”和“可读性”。
- 推荐写法：
max-width: 1200px; width: 90%; margin: 0 auto; - 避免嵌套多层
width: 100%：每层都可能累积计算误差，尤其配合box-sizing: border-box时容易溢出 - 内边距也用相对单位：
padding: 2rem 5%比padding: 20px 40px更可控
字体大小不能全靠 px，rem 是主力，但得配好根字号
直接写 font-size: 16px 在小屏上字太小，在大屏上又太大。用 rem 可以统一调控，但前提是 html 的 font-size 要能随视口变化。
- 基础方案：
html { font-size: 16px; }+ 媒体查询调整：@media (max-width: 768px) { html { font-size: 14px; } } - 进阶方案（更平滑）：
html { font-size: clamp(14px, 4vw, 18px); }—— 小屏不小于 14px，大屏不大于 18px，中间按视口宽度线性插值 - 慎用
em做全局字体：它继承父级，嵌套深了容易失控；rem始终相对于根元素，更可靠
图片比例失真？问题往往出在 height 设置上
max-width: 100% 只解决宽度，如果同时写了 height: 300px 或 height: 100%，图片必然拉伸或裁切。
- 安全写法只有两条：
max-width: 100%; height: auto; - 背景图用
background-size: cover或contain，但必须配合background-position: center防止关键内容被切掉 - 重要内容图优先用
<picture></picture>+srcset：比如头图在手机上用竖构图，在桌面用横构图，height: auto自然就保住了比例
真正难的不是写对某一行代码，而是判断哪个元素该“固定”、哪个该“流动”、哪个该“换结构”。比如导航栏在桌面是横向 flex 排列，在手机上必须收进汉堡菜单并切换为垂直布局——这种结构性变化，没法靠单纯调比例解决，得靠媒体查询配合 DOM 状态切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
