CSS 響應式設計與兼容性

@media 屬性

響應式設計創建一個布局，通過媒體查詢和靈活網格自動適應任何設備尺寸。就像一個球可以<span class="highlight">成長或縮小</span>以適應不同大小的環。
自適應設計涉及為不同設備創建多個固定布局。根據檢測到的設備尺寸或類型，自適應設計提供專為該設備預設的布局。就像為<span class="highlight">每種尺寸準備不同的球</span>。

響應式設計更靈活但實現可能具有挑戰性，而自適應設計依賴於設備檢測但通常會產生更精確的布局。

使響應式網站適應移動設備需要更多工作，因為圖標可能會重疊並需要調整大小，對於表格，可能仍需滾動查看。
在移動優先策略中，所有顯示都設計為在移動設備上顯示，當擴展到瀏覽器大小時，大多數內容仍能正常顯示，只是留下一些空白。
我們有將應用程序（移動優先策略）轉移到網頁的經驗，因為我們想在迷你程序中使用相同的代碼，在轉移時，我們可能會發現一些功能由於網頁瀏覽器和應用程序的性能差異而無法正常工作。
- 動畫可能會閃爍。
- 一些元素可能會輕微錯位。

識別問題及目標瀏覽器 (browser) 後，可以使用僅針對特定瀏覽器加載的獨立樣式表 (separate style sheet)。此方法需要伺服器端渲染來檢測用戶的瀏覽器類型 (requires server-side rendering)，並加載對應的 CSS 檔。
**使用像 Bootstrap 這樣的庫 **(libraries)，它們已經處理了各種瀏覽器的樣式兼容問題，可以幫助你避免部分瀏覽器的差異性問題。
使用 autoprefixer 自動添加前綴 (add vendor prefixes)：這樣可以自動為不同瀏覽器添加所需的廠商前綴，從而解決兼容性問題。
- -webkit-：適用於 Chrome、Safari 和一些行動裝置瀏覽器，代表 Webkit 引擎專屬的屬性前綴
- -moz-：適用於 Firefox，代表 Mozilla 引擎專屬的屬性前綴
- -ms-：適用於 Microsoft Edge 和 Internet Explorer，代表 Trident 或 EdgeHTML 引擎專屬的屬性前綴
- -o-：曾用於早期版本的 Opera 瀏覽器，代表 Presto 引擎專屬的屬性前綴
使用 Reset CSS 或 Normalize.css：這些工具可以標準化不同瀏覽器的默認樣式，減少樣式差異，從而讓樣式在各瀏覽器間顯示一致。