[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

使用建議

以下為google developers的建議

最佳化 CSS 的使用情況

CSS 是建構轉譯樹狀結構的必備元素，但在初次建構網頁時，JavaScript 常常會禁止 CSS 執行。請務必將任何非必需的 CSS 標記為非關鍵資源 (例如 print 或者其他媒體查詢)，並且儘可能減少關鍵 CSS 數量及縮短傳輸時間。
將 CSS 放入文件的 head 標籤內

建議您儘早在 HTML 文件中指定所有 CSS 資源，以便瀏覽器及早發現 標籤，迅速發出 CSS 請求。

避免使用 CSS import

CSS import (@import) 指令可讓一個樣式表從另一個樣式表檔案中匯入規則。但是，建議您避免使用這些指令，因為這會在關鍵路徑中增加往返次數：只有在收到並剖析完帶有 @import 規則的 CSS 樣式表之後，才會發現匯入的 CSS 資源。
內嵌禁止轉譯的 CSS

為了獲得最佳效果，您不妨考慮將關鍵 CSS 直接內嵌到 HTML 文件中。這麼做可以減少關鍵路徑中的額外往返次數。如果做法正確，在只有 HTML 一項禁止資源時，就能實現「一次往返」的關鍵路徑長度。


https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-tw

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations