css - 在响应式站点中使用 uncss 删除不需要的 css

Question

我有 uncss（github 上的一个项目）来为响应式站点删除不需要的 css。它还删除了 mobile.css 文件中提到的 css，但这实际上会影响移动视图中的站点。我不知道 uncss 是如何工作的？即天气它只是删除了DOM中不存在的选择器，或者它删除了仅在特定视口中不使用的选择器。

Answer 1

媒体选项是拯救：

options = { ... media : ['(min-width: 700px) handheld and (orientation: landscape)'], ... }

从文档：

media (Array)：默认情况下，UnCSS 只处理带有媒体查询“all”、“screen”和没有的样式表。在此处指定要包括哪些其他内容。

只需为 mobile.css 指定确切的 meida 选项并享受正确的 unCSS 工作。

Answer 2

来自github：

如何？

UnCSS 删除未使用规则的过程如下：

1. HTML 文件由 PhantomJS 加载并执行 JavaScript。
2. 使用的样式表是从生成的 HTML 中提取的。
3. 样式表被连接起来，规则由 css-parse 解析。
4. document.querySelector过滤掉在 HTML 文件中找不到的选择器。
5. 其余规则将转换回 CSS。

所以是的，它在运行时删除了不在 DOM 中的选择器。如果你动态添加了选择器，你可以通过/* uncss:ignore */在它们之前添加注释来让 uncss 忽略它们：例如

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}