media queries（媒体查询）应放在什么位置？不同放置方式有何差异？

两种主流放置方式说明 #

• 单样式表内放置
  不需要强制放在整个样式表的最底部，只要保证媒体查询内的规则优先级高于要覆盖的默认样式即可。通常我们会把响应式规则跟在对应组件的基础样式后面，或是统一放在样式表末尾，比如先写.container {width: 1200px;}，再写@media (max-width: 768px) {.container {width: 100%}}就能正常生效。
• HTML <head> 内分文件引入
  可以通过link标签的media属性关联不同端的样式表，示例写法：

  <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1200px)">
  <link rel="stylesheet" href="tablet.css" media="screen and (min-width:768px) and (max-width:1199px)">
  <link rel="stylesheet" href="phone.css" media="screen and (max-width:767px)">
  

  注意：哪怕媒体查询和当前设备不匹配，浏览器依然会下载所有关联的CSS文件，只是不会应用不匹配的样式，不存在“移动端只下载移动端样式”的优化效果，这是W3C规范要求的，避免窗口resize时出现样式闪烁。

性能层面差异 #

• 单样式表方案：HTTP请求数更少，中小项目配合打包工具压缩后，额外的媒体查询代码开销几乎可以忽略，性能表现优于分文件方案。只有当样式表体积超过500KB（未压缩）时，可能会略微拉长首屏CSS解析时间，绝大多数场景下不会有感知。
• 分文件引入方案：会增加多个HTTP请求，HTTP/1.1环境下多个请求的排队阻塞开销远大于媒体查询带来的体积增量，HTTP/2的多路复用可以缓解请求开销，但因为所有CSS文件都需要全量下载，总资源体积和下载耗时不会比单文件方案更优。

维护层面差异 #

• 单样式表方案：
  优势：同一个组件的基础样式和响应式规则可以放在一起，修改时不需要跨文件查找，配合Sass/Less等预处理器可以把媒体查询嵌套在组件规则内部，可读性极高，适合绝大多数中小项目、组件化开发场景。
  劣势：超大型项目如果没有做好样式模块化，总样式表过长时，排查样式冲突的成本会略有上升。
• 分文件引入方案：
  优势：不同端的样式完全隔离，适合多团队分工分别维护不同端样式的超大型项目，不会出现不同端样式互相覆盖的问题。
  劣势：修改同一个组件的响应式表现需要同时改动多个文件，很容易出现遗漏，通用样式抽离不到位的话还会出现多份重复代码，维护成本大幅上升。

选型建议 #

• 90%以上的常规项目优先选择单样式表内写媒体查询的方案，不需要强行拆分多文件，媒体查询可以跟在对应组件基础样式后面，也可以统一放在样式表底部，只要保证优先级正确即可。
• 只有当项目是多端完全独立设计、不同端样式重合度低于30%、且有独立团队分别维护不同端的场景，再考虑分文件引入的方案。

内容的提问来源于stack exchange，提问作者JosueMagnus12