desktop first的核心是桌面端为默认行为、移动端用min-width渐进增强，而非max-width打补丁；必须设置正确的viewport标签，兼容ie11需规避现代flex/grid陷阱，断点应依内容承载力反推而非照搬框架值。
Desktop First不是写完桌面再补移动端
老项目加响应式，很多人以为“Desktop First”就是先写1200px宽的样式，等上线前再用@media硬塞一堆max-width覆盖——结果是CSS体积翻倍、维护时改一处要查十处、!important满天飞。
真正Desktop First的核心，是把桌面端当作「默认行为」，移动端用min-width向上渐进增强，而不是向下打补丁。
- 所有基础样式（字体、间距、布局容器）不写媒体查询，直接生效
- 移动端优化只在
@media (min-width: 768px)及以上才开始介入（注意：是min-width，不是max-width） - 老项目里已有的
max-width断点必须全部重审——它们大概率在干扰优先级，且和现代设备宽度对不上
viewport meta标签必须显式声明width=device-width
没这行，@media (min-width: 768px)在iOS Safari里可能完全不触发，因为页面默认按980px渲染，缩放后媒体查询匹配的是虚拟视口而非物理屏幕。
老项目常漏掉或写成width=1024这类固定值，导致移动端样式彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 不能写
user-scalable=no——它会禁用双击缩放，对表单输入框、小字号文本极不友好 - 如果项目用了
transform: scale()做全局缩放，viewport设置会失效，得先干掉这个hack
flex/grid在IE11中Desktop First的兼容底线
老项目躲不开IE11，但display: flex和display: grid在IE里行为差异极大，Desktop First策略下尤其容易崩：比如flex-wrap: wrap在IE11里不认min-width，导致卡片在桌面端就换行。
不是不能用，而是得接受IE11的规则——它只认flex: 0 0 auto这类旧语法，且grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))这种现代写法直接忽略。
- 桌面端主布局用
display: flex时，给子项明确写flex-basis（如flex-basis: 300px），别依赖minmax() - 避免在IE11环境用
grid-gap，改用margin模拟，否则间隙消失 - 检查
box-sizing：IE11下border-box对flex子项的计算更稳定，老项目若混用content-box，桌面端宽度会突然溢出
媒体查询断点值不能照搬Bootstrap或Tailwind
老项目里直接抄sm: 576px、md: 768px，结果发现iPad竖屏（768×1024）被当成桌面端，而某些安卓平板横屏（800×1280）又掉进md和lg之间的缝隙——断点不是设备尺寸，是内容承载能力的临界点。
Desktop First下，断点应该从桌面布局开始反推：比如主内容区最大撑到1200px还舒服，那第一个移动端优化点就设在@media (max-width: 1199px)，而不是无脑用992px。
- 优先用
max-width做降级（如针对小屏手机），但仅限于真正需要收缩的模块，别全站套用 - 同一组件在不同上下文可能需要不同断点——
.header-nav在首页和内页的折叠时机往往不一样 - 用
device-width做断点？别试。Chrome DevTools的“Responsive”模式和真实设备的window.innerWidth经常差50px以上，靠它调试等于蒙眼开车
Desktop First在老项目里最麻烦的不是写法，而是得重新判断每一处“多大算大”——这个判断一旦错，后面所有@media都在修一个错误的前提。
