如何在调用外部CSS的代码中使用媒体查询？如何仅在非移动端应用独立CSS文件？

你可以直接在引入外部CSS的<link>标签里通过media属性指定媒体查询条件，只有当条件满足时，浏览器才会加载并应用这个CSS文件。

举几个实用的例子：

• 仅在屏幕宽度大于768px时加载目标CSS：

<link rel="stylesheet" href="your-styles.css" media="screen and (min-width: 768px)">

• 针对横屏状态的移动设备加载样式：

<link rel="stylesheet" href="landscape-styles.css" media="screen and (orientation: landscape)">

• 多条件组合（比如限定屏幕宽度在1024px到1440px之间）：

<link rel="stylesheet" href="medium-screen-styles.css" media="screen and (min-width: 1024px) and (max-width: 1440px)">

另外，也可以在CSS文件内部用@import引入带媒体查询的外部样式，但这种方式可能影响加载性能，一般更推荐<link>标签的写法：

@import url('special-styles.css') screen and (min-width: 768px);

有两种常用方案，按需选择即可：

方法一：通过<link>标签的媒体查询控制加载 #

直接在引入sidebar CSS的<link>里设置media属性，限定仅在非移动设备的屏幕尺寸下加载文件：

<link rel="stylesheet" href="sidebar.css" media="screen and (min-width: 768px)">

这种方式最高效——小屏幕设备不会加载这个CSS文件，既省资源又能实现需求。

方法二：在CSS文件内部用媒体查询包裹样式 #

如果必须始终加载这个CSS文件，那就把所有sidebar相关样式都包裹在媒体查询块里：

/* sidebar.css 文件内容 */
@media screen and (min-width: 768px) {
  .sidebar {
    width: 260px;
    float: left;
    margin-right: 20px;
    /* 其他sidebar样式... */
  }
  /* 所有和sidebar关联的样式都放在这个媒体查询内部 */
}

这样即使文件被加载，小屏幕设备也不会应用这些样式。

优先推荐方法一，它能减少不必要的网络请求。

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