技術標籤：csscss

現在響應式沒有以前那麼火了，因為響應式有一個缺點，它需要載入所有資源，即使是沒有顯示的，很浪費資源，影響使用者體驗，但是日常開發中，我們仍需要使用它進行一些開發。

原理：媒體查詢

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
// 解釋：width = device-width：寬度等於當前裝置的寬度

<style>
@media 媒體型別 and  (媒體特性) {
   .container {
      width：970px
   }
}
</style>
 

媒體型別：all 、print、scree

媒體特性：對於scree來說，width、min-width、max-width。當滿足媒體型別和媒體特性的同時，會執行後續程式碼

規則：① 按照從大到小、從大到小的順序來執行 ② 數字後面的單位不可以省略

型別：

①：樣式響應

①：引入資源

當響應式佈局頁面變化比較大的時候，可以準備兩套CSS，通過響應式的引入兩套CSS檔案，來實現響應式佈局。（對比正常連結