此篇會著重在 Bootstrap 5 響應式的介紹以及使用方法。
響應式網頁設計 (Responsive Web Design) 簡稱
RWD，為了讓網頁排版能適應不同尺寸的裝置，透過 CSS3 的media query針對不同裝置來設置對應的樣式。
Step1：起手式（設置 viewport）
在
<head>標籤引入viewport的<meta>標籤
width=device-width : 瀏覽器頁面寬度=當前裝置的寬度。（ex: 平板、手機）height=device-height：瀏覽器頁面高度=當前裝置的高度。（ex: 平板、手機）initial-scale=1.0 : 畫面初始縮放比例為 100%（即不放大也不縮小）。minimum-scale：允許使用者縮放到的最小比例。maximum-scale：允許使用者縮放到的最大比例。user-scalable : 設定使用者能否手動縮放比例，user-scalable=no 就是不允許縮放。<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Step2：透過斷點來設置不同裝置大小對應的樣式
bootstrap 5 使用響應式會在樣式後面加上 -* 斷點的通用類別名稱。（ex：class="p-md-2"）
示範：此容器的 padding、文字大小，都設置了三個斷點，並對應不同尺寸裝置所顯上的樣式。
<div class="p-1 p-md-2 p-lg-3">
<p class="fs-1 fs-2 fs-3">響應式文字</p>
</div>
用來判別裝置的尺寸，在設置相對應尺寸的樣式。
media 語法：
@media (條件) {樣式}
透過
max-*、min-*設置不同裝置尺寸的範圍，來指定對應樣式。
@media(max-width:767px) {
.container{
max-width: 720px;
}
}
@media(max-width:992px){
.container{
max-width: 960px;
}
}
覆蓋特性（程式碼由上到下），因此後面樣式會覆蓋前。
斷點是響應式開發的基礎，使用斷點來控制在特定尺寸或設備上調整佈局。
常見尺寸：
常用設置：
Bootstrap 是 min-width 手機優先，預設沒有斷點狀況是手機大小的樣式。
手機優先（由小寫到大）：CodePen範例
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }
桌面版優先（由大寫到小）：CodePen 範例
@media (max-width: 1399.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 575.98px) { ... }
注意事項：
順序 撰寫，不然樣式會無法覆蓋。（覆蓋特性 後面的樣式會覆蓋前面的樣式）
/* 錯誤範例 */
@media (min-width: 576px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 768px) { ... }
min-width、max-width 混用。
/* 錯誤範例 */
@media (min-width: 576px) { ... }
@media (max-width: 992px) { ... }
越少 越好 3-4 個即可。（不要超過五個，除非客戶很機八）min-width、max-width 如何選擇 ？
小技巧：
我自己喜歡 min-width 比較方便設置 @media 區間，平時也使用 Bootstrap 比較多。
職場小聚場
第一次 Demo
第二次 Demo
問題：版型寫死導致子元素破版超出父元。
解決：
% 數 計算容器大小，來達到尺寸自適應縮放。% 數計算：
通常不會算滿 100% 會少一點點預留空間。
網頁出現滾動軸，別說是 RWD 網頁。
問題：外層寫死了寬度，導致瀏覽器沒有自適應縮放，小於 1400px 時就會出現 x 軸。
container{
width: 1400px;
}
解決：改寫為 max-width。
row {
max-width: 100%;
/*max-width: 1400px;*/
margin: 0 auto;
}
優點：
viewport ？
iThome鐵人賽
看影片追技術