Question

我们想基于所有设备的断点加载某些文件。以下是我们正在生成的HTML输出示例，但是无法根据media字段中的<link>属性来加载文件。

问题

我们如何基于断点加载某些文件？

我们尝试过的事情

<html>
  <head>
    <link rel="stylesheet" media="all" href="some/path/all.css">
    <link rel="stylesheet" media="all and (min-width: 480px)" href="some/path/all-480.css">
    <link rel="stylesheet" media="all and (min-width: 768px)" href="some/path/all-768.css">
    <link rel="stylesheet" media="all and (min-width: 1200px)" href="some/path/all-1200.css">
  </head>
  <body>
     <p> Some body</p>
  </body>
</html>

当前问题

当我们打开Chrome开发工具时，我们注意到页面加载时所有文件都被提取。

预期结果

some/path/all.css。
some/path/all-480.css仅在加载或调整大小的窗口大于480px时才加载
some/path/all-768.css仅在加载或调整大小的窗口大于768px时才加载
some/path/all-1200.css仅在加载或调整大小的窗口大于1200px时才加载

包括基于断点的CSS文件

0 个答案: