在link标签media属性指定加载不同CSS文件替代@media写法是否合理？

方案正确性判断 #

你写的这个实现语法完全符合W3C规范，没有错误：link标签的media属性原生支持媒体查询规则，浏览器会自动识别当前设备/窗口的参数是否匹配属性值，只将匹配到的CSS文件内的样式应用到页面上。

注意一个常见认知误区：不匹配media规则的CSS文件不会跳过下载，浏览器还是会请求所有link引入的CSS资源，只是不匹配的资源会以最低优先级下载，不会阻塞首屏渲染，也不会生效。

实际项目使用建议 #

这个方案有特定的适用场景，没有绝对的“能不能用”，你可以根据项目情况选择：

适合使用的场景 #

• 项目体量极小，只有1-3个简单页面
• 移动端和桌面端样式差异极大，几乎没有可复用的公共样式
• 项目仅需适配固定的1-2个断点，没有后续频繁迭代的需求
  这种场景下用这个方案可以实现样式文件完全拆分，维护起来更清晰。

不推荐使用的场景 #

如果是中大型项目、有迭代需求的项目，更建议把媒体查询写在单个CSS文件内，原因如下：

• 该方案不会减少总资源下载体积，反而会多产生至少1次HTTP请求，HTTP1.1环境下请求开销反而会拉高总加载耗时
• 公共样式（比如全局重置、字体规则、通用组件样式）要么会在两个CSS文件中重复冗余，要么需要额外拆分公共CSS文件，又会增加请求数
• 当用户手动拖拽浏览器窗口跨越断点时，切换另一套CSS文件会有概率出现短时间样式闪屏，体验不如单文件内的媒体查询顺滑
• 后续迭代修改通用规则时，需要同时修改多个CSS文件，维护成本更高，容易出现疏漏
  如果你在用SCSS的话，可以直接把媒体查询封装成mixin，写在单文件里一样可以做到按模块管理，比拆分文件的方案性价比高很多。

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