当页面具有响应性设计时，减小CSS的大小(例如使用引导)

Question

考虑一下，如果我有一个具有响应性设计的页面。我发现purifyCSS可以帮助修剪未使用的CSS规则，我想知道是否有任何方法可以使用这个工具来检查CSS的使用情况和响应性设计。

作为参数之一，我必须传递一个包含页面内容的html文件--如何为这样的设计做到这一点？

Answer 1

我不熟悉purifyCSS，也不熟悉引导，但您可以使用CSS3媒体查询(请参阅MDN文档)只使用所请求的特定设备所需的CSS。

例如，以下HTML代码：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="desktop.css" media="@media (min-width: 700px) and (orientation: landscape)">

将始终请求main.css样式，并且只有当屏幕适合给定的媒体查询时才使用desktop.css样式。(请注意，这使用了移动优先响应设计。)

但是，就像注释中建议的@makshh一样，这实际上并不会删除未使用的CSS，但它只会忽略不需要的样式。这个方法还会请求所有样式表，即使它们不适用，所以它也不会减少CSS的数量；如果浏览器的大小和不同的样式需要应用，这是必要的。因此，我不认为您应该删除不必要的CSS，因为这将限制设计的响应性。