时间戳

首页 > 解决方案 > 包含基于断点的 CSS 文件

html - 包含基于断点的 CSS 文件

问题描述

我们想根据所有设备的断点加载某些文件。下面是我们生成的 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>

当前问题

  1. 当我们打开 Chrome 开发工具时，我们注意到在页面加载时会获取所有文件。

预期成绩

  1. some/path/all.css应该为所有断点加载。
  2. some/path/all-480.css仅当加载或调整大小的窗口大于480px
  3. some/path/all-768.css仅当加载或调整大小的窗口大于768px
  4. some/path/all-1200.css仅当加载或调整大小的窗口大于1200px

标签： htmlcssresponsive-designbreakpoints

解决方案

推荐阅读