grid布局本身不支持按需加载，真正控制css文件是否下载的是html的标签；媒体查询仅决定样式何时生效，不阻止文件下载，必须用js动态创建并插入dom才能彻底避免初始请求。
Grid布局本身不支持按需加载，真正能控制CSS文件是否下载的是HTML的<link>标签
很多人以为在@media里写grid-template就能让浏览器只加载对应尺寸的网格样式，其实不是。CSS内部的媒体查询只决定样式「何时生效」，不阻止文件下载——哪怕你把整个桌面端Grid规则全塞进@media (min-width: 1024px)，这个CSS文件依然会在页面打开时被完整请求、解析、构建CSSOM。
真正能跳过初始下载的，是<link rel="stylesheet" media="not all">这种写法。浏览器看到media="not all"会直接跳过请求，直到JS把它改成media="(min-width: 1024px)"并重新插入DOM。
- 别用
media="(max-width: 767px)"做移动端入口——它仍会触发预加载，尤其在Chrome中 -
media="print"或media="screen and (min-width: 992px)"这类“当前不匹配”的值才可能延迟加载，但不保证完全不请求 - 想彻底避免请求，必须用JS动态创建
<link>并appendChild，不能只改media属性
移动端优先写Grid，@media里只做增强，别写回退
基础样式默认适配手机：单列、grid-template-rows为主、gap宽松、font-size用rem或vw。然后在@media (min-width: 768px)里加平板布局，在@media (min-width: 1024px)里加桌面栅格——这是唯一能靠层叠逻辑稳稳覆盖的方式。
反着写（比如先写桌面Grid，再用@media (max-width: 767px)覆盖）极容易失效：小屏设备可能先渲染出错乱的大屏布局，等媒体查询解析完才重绘，弱网下抖动明显。
- 所有
@media规则建议统一放在CSS文件末尾，避免解析中途就应用高权重规则 - 断点值用变量管理（如Sass中
$breakpoint-tablet: 768px），别散落写767px和768px混用 - 别在
@media里只改grid-template-columns——grid-template是简写，漏掉grid-template-areas会导致整条声明静默失效
grid-template-areas字符串必须严格对齐，否则布局直接消失
写grid-template-areas: "header header" "main sidebar" "footer footer";看着简单，但换行、引号、行列数三者任一出错，浏览器就当这条规则不存在。它不会报错，也不会 fallback，只是默默忽略。
常见翻车点：复制代码时漏了引号；用JS拼接多行字符串却没加+；或者最后一行少写一个区域名（比如"footer"而不是"footer footer"），导致整行不匹配，后续所有区域定位都失效。
- 调试时临时给每个
grid-area加background，一眼看出哪些区域没被模板定义 -
grid-area名字大小写、空格、连字符必须和grid-template-areas里完全一致，sidebar≠side-bar - 如果新
@media模板里没定义某个grid-area名，对应元素会回退到文档流，可能叠在一起或跑出视口
viewport元标签没配，@media就是摆设
写了十套@media (min-width: 768px)，但HTML里没这行：<meta name="viewport" content="width=device-width, initial-scale=1">，那移动端浏览器默认以980px宽度渲染，所有max-width/min-width查询全失效。
更隐蔽的问题是content="width=768"这种固定写法，它锁死了视口宽度，@media再怎么写都只能匹配一次，横竖屏切换、系统字体放大都会让实际视口宽偏离预期。
- 真机测试比DevTools模拟更重要：iOS Safari横屏、安卓WebView缩放、折叠屏展开，都可能让
window.innerWidth和媒体查询结果不一致 - 别依赖
ontouchstart判断设备类型来切Grid——触屏笔记本也会触发，且无法反映真实视口尺寸 - 如果必须动态加载不同Grid CSS，优先走服务端UA识别+条件渲染，比前端JS更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
