- 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
沒有留言:
張貼留言
留個話吧:)