實現響應式網頁設計
@
為什麼需要響應式網頁
隨着網頁數量和質量的上升，以及設備種類和數量的增加，不同設備查看不同網頁導致的縮放問題、排版問題等一系列前端問題越發明顯。
想要解決他們，我們可以為不同類型的設備編寫不同樣式的代碼，做不同版本的測試。
然而這樣做有兩個弊端：
- 工作量過大
- 同種類型設備的尺寸相差也可能很大，有時儘管專門設計了對應版本，依然無法保證每個用戶的設備都能較好適配
因此我們需要使用響應式網頁來解決這個問題，通過設備自適應解決排版問題而非程序員編寫對應代碼適應設備，這樣一來就能減少工作量，同時保證絕大多數設備都能很好適配
什麼是響應式網頁
利用 CSS 和 JavaScript 自動根據設備屏幕尺寸調整頁面的布局和樣式的網頁，主要解決固定
寬度和影響布局的元素的問題
如何實現響應式網頁
1. 設置前置 meta 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
設置 name 屬性值為 viewport，content 中的內容意味設置寬度為設備寬度，縮放比例為1（不縮放），因此移動設備查看 PC 網頁時就不會縮放的很小，而是原始比例顯示
2. 設置了固定寬度的區域
對於這類區域，有時會出現橫向滾動條，很不方便
因此，我們可以使用百分比寬度，使其根據瀏覽器可視區域自動調整尺寸
即 width = 100% 或 max-width = 80%
3. 使用布局的區域
gird 布局默認豎向，不會產生問題，但是如果設置多列布局，且每列浮動寬度如 fr，那麼就會導致每列過小。
此時可以通過 repeat() 和 minmax() 函數來實現，當容器最後的空間不足以容納列的最小寬度時，換行。
flex 布局也有類似的問題，但 flex 默認就是橫向，但是可以更簡單的使用 wrap 和設置最小寬度的方式實現折行以及擴展
4. 圖片
在 PC 端，我們可以簡單的使用 width = 100% 來保證布局的美觀大方，但這樣一來，在移動端顯示時就會導致圖片過小，而且縱橫比相反。
我們可以使用 img 標籤的 srcset 屬性和 sizes 屬性來根據最大寬度和像素密度選擇合適的最大寬度圖片路徑
<img src="../image-300.png"
srcset=" ../image-1240.png 1240w,
../image-600.png, 600w
../image-300.png, 300w
sizes="(max-width : 400px) 300px, (max-width : 900px) 600px, 1240px"/>
我們也可以使用 picture 標籤和 source 標籤，在其中設置 media 屬性和 srcset 屬性，根據顯示屏尺寸選擇合適的圖片，進行路徑選擇以及渲染
使用一個 img 標籤進行保底圖片，以免出現無圖加載的情況
<picture>
<source media="(max-width : 400px)" srcset="../image-300.png" />
<source media="(max-width : 900px)" srcset="../image-600.png" />
<img src="../image-1240.png" />
</picture>
5. 字體
比較建議使用浮動單位進行調整，比如 em, rem , vw
但是注意，使用 vw 時最好加一個保底數值，以免頁面寬度過小時字體也會變得非常小：
h1 {
font-size : calc(2rem + 2vw);
}
我們也可以選擇用 @media() 根據不同設備大小選擇不同的字體大小：
@media (max-width : 900px) {
h1 {font-size : 3rem;}
}
@media (max-width : 700px) {
h1 {font-size : 2rem;}
}
