當頁面具有響應式設計時（例如，使用Bootstrap）減小CSS的大小

Question

考慮一下我的頁面是否具有響應式設計。 我發現purifyCSS可以幫助修剪未使用的CSS規則，我想知道是否有任何方法可以使用此工具來根據響應設計檢查CSS的使用情況。

作為參數之一，我必須傳遞帶有頁面內容的html文件-對於這種設計該如何做？

Answer 1

我不熟悉purifyCSS或Bootstrap，但是您可以使用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，因為這會限制設計的響應速度。