响应式布局可用原生HTML+CSS轻量实现，关键在设置viewport、合理使用rem/vw单位、按内容需求设媒体查询断点，并优先采用Flexbox与Grid布局。
响应式布局不必堆砌框架，用原生 HTML + CSS 就能轻量落地，关键在三个动作：设好 viewport、用对相对单位、媒体查询只写必要断点。
为什么 <meta name="viewport"> 是第一道门槛
没有它，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，再缩放显示，导致文字小、点击区域难触达。这不是样式问题，是渲染逻辑被绕过了。
- 必须写在
<head>里，且放在所有 CSS 引入之前 - 标准写法是
<meta name="viewport" content="width=device-width, initial-scale=1.0">；加user-scalable=no会损害可访问性，不建议 - 部分安卓 WebView 对
initial-scale=1.0支持不稳定，可补一句maximum-scale=1.0防意外放大
rem 和 vw 到底怎么选
rem 适合全局字号/间距控制，依赖 html 根字体大小；vw 更直接响应视口宽度，但容易在大屏上失控。两者不是替代关系，是分工关系。
- 标题、段落行高、容器内边距用
rem：比如font-size: 1.25rem;，配合 JS 动态设置document.documentElement.style.fontSize实现屏幕宽度区间映射 - 全宽 Banner、最大容器宽度用
vw：比如max-width: 90vw;，避免在超宽屏上拉得太开 - 慎用
vh做高度——iOS Safari 地址栏收放会触发视口高度变化，造成内容跳动
媒体查询断点别照搬“主流尺寸”
所谓 768px、1024px 是 iPad 旧型号的遗留值，现在大量安卓平板和折叠屏设备宽度介于 600–850px 之间。硬套断点反而让布局在真实设备上卡住。
立即学习“前端免费学习笔记（深入）”；
- 优先用内容驱动断点：比如导航项开始换行、文字行宽超过 80 字符、卡片并排出现横向滚动，这时才加
@media (max-width: ...) - 移动端优先写法更可靠：基础样式默认适配小屏，只在大屏用
@media (min-width: 768px)覆盖布局，减少覆盖冲突 - 避免嵌套多层媒体查询——CSS 解析是顺序执行，深层嵌套易漏写、难调试，一个组件一个断点就够了
Flexbox 和 Grid 不是“高级功能”，而是默认选项
IE11 已退出主流支持周期，2026 年起可放心用 display: grid 和 display: flex 作为布局基线，它们比浮动或 inline-block 更少副作用。
- 单行/单列排列（如导航、标签栏）用
flex：flex-wrap: wrap比媒体查询切换更顺滑 - 二维结构（如文章列表、仪表盘卡片）用
grid：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))能自动填满可用空间，无需预设列数 - 注意
gap属性兼容性：Chrome 100+、Firefox 103+、Safari 16.4+ 均已支持，旧版 Safari 可用margin回退
真正轻量的核心，是把“适配”从“猜设备”转向“看内容”。写完一段 CSS 后，别急着加断点，先拖动浏览器窗口观察内容何时开始挤压或留白——那个临界宽度，才是你该写的断点。
