通過媒體查詢、Bootstrap 框架完成騰訊全端網頁響應式布局。
一、響應式布局方案
1、什么是響應式布局
它的主要特點是能夠使網頁根據不同的設備屏幕尺寸（如桌面電腦、平板電腦、手機等）和分辨率自動調整布局和顯示效果，以提供最佳的用戶體驗。
- 適應不同屏幕寬度：確保頁面元素在各種屏幕大小下都能合理顯示，不會出現內容溢出或布局混亂的情況。
- 保持可讀性和可用性：文字大小、按鈕間距等元素會自動適配，方便用戶操作和閱讀。
- 優化圖片顯示：圖片會根據屏幕尺寸進行縮放，避免浪費帶寬和加載時間。
這里以騰訊全端為例，當網頁尺寸變化時，頁面布局也跟著變化。
2、怎么實現響應式布局
- 媒體查詢
@media (條件) {html {height: 300px;background-color: green;}
}
- Boostrap 框架
Bootstrap 是由 Twitter 公司開發維護的前端 UI 框架，它提供了大量編寫好的 CSS 樣式，允許開發者結合一定 HTML 結構及 JavaScript，快速編寫功能完善的網頁及常見交互效果。
二、媒體查詢
1、媒體查詢完整寫法（了解）
這里先講一下媒體查詢的完整寫法：
@media 媒體類型 關鍵詞 (媒體特性) {選擇器 {樣式}
}
- 媒體類型
媒體類型是用來區分設備類型的，如：屏幕設備、打印設備等，其中手機、平板、電腦都屬于屏幕設備。
| 類型名稱 | 值 | 描述 |
|---|---|---|
| 屏幕 | screen | 帶屏幕的設備 |
| 打印預覽 | 打印預覽模式 | |
| 閱讀器 | speech | 屏幕閱讀模式 |
| 不區分類型 | all | 默認值，包括以上3中情況 |
- 關鍵詞/邏輯操作符
（1）and
（2）only
（3）not
- 媒體特性
媒體特性主要用來描述媒體類型的具體特征，如當前屏幕的寬高、分辨率、橫屏或豎屏等。
| 特性名稱 | 屬性 | 值 |
|---|---|---|
| 視口的寬高 | width、height | 數值 |
| 視口的最大寬或高 | max-width、max-height | 數值 |
| 視口的最小寬或高 | min-width、min-height | 數值 |
| 屏幕方向 | orientation | portrait: 豎屏 landscape: 橫屏 |
媒體查詢完整的寫法了解就可以了，因為實際開發中，我們經常使用的是簡寫的寫法，即：
@media (媒體特性) {選擇器 {樣式}
}
2、min-width 和 max-width
-
min-width：最小寬度，作為媒體特性的條件時，表示最小寬度等于 某個px 值時，即 當視口寬度 大于等于 某個px 值 時，媒體查詢生效。
-
max-width：最大寬度，作為媒體特性的條件時，表示最大寬度等于 某個px 值時，即 當視口寬度 小于等于某個px 值 時，媒體查詢生效。
3、書寫順序
當媒體特性是 max-width 和 min-width 時，書寫順序很重要，如果順序錯了，可能導致效果無法實現，因為 css 具有層疊性。
- min-width：從小到大的書寫順序
- max-width：從大到小的書寫順序
拿 min-width 舉例，如果不按這個順序寫，比如先寫 min-width:1200px，再寫 min-width: 992px，當視口寬度大于 1200px 時，也滿足大于 992px，因為 css 具有層疊性， min-widht: 992px 里面的代碼會覆蓋 min-width: 1200px里面的代碼，導致當屏幕大于 1200px 時，無法顯示 min-width: 1200px 里面的代碼。所以要按照順序，不能打亂順序書寫。
<head><title>書寫順序</title><style>/* 網頁默認背景色是灰色 */body {background-color: #ccc;}/*如果不按這個順序寫，比如先寫 min-width:1200，再寫 min-width: 992當視口寬度大于1200，也滿足大于 992，min-widht: 992 里面的代碼會覆蓋 min-width: 1200 里面的代碼。所以要按照順序，不能打亂順序書寫。min-width：大于等于某個px值才生效, 想象屏幕逐漸變大, 后面的媒體查詢想要生效，只能px值越大，越往后面寫，才能生效，書寫順序從小到大max-width：小于等于某個px值才生效, 想象屏幕逐漸變下, 后面的媒體查詢想要生效，只能px值越小，越往后面寫，才能生效，書寫順序從大到小*//* 屏幕寬度 大于等于 768px，網頁背景色是粉色 min */@media (min-width: 768px) {body {background-color: pink;}}/* 屏幕寬度 大于等于 992px，網頁背景色是綠色 min */@media (min-width:992px) {body {background-color: green;}}/* 屏幕寬度 大于等于 1200px，網頁背景色是 skyblue min */@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
4、媒體查詢-外部CSS
在實際開發項目中，如果使用媒體查詢的次數或代碼很少時，可以將代碼寫在內部樣式表中，如果媒體查詢用到的次數或代碼很多，可以在使用link標簽在引入外部CSS時進行媒體查詢，滿足媒體查詢時 html 才加載 CSS 文件，當不滿足媒體查詢時，html 移除這個 CSS 文件，CSS 文件中就不需要在寫媒體查詢了，只需要正常寫 CSS 代碼就行。
- 完整寫法 （了解）
<link rel="stylesheet" media="媒體類型 邏輯操作符 (媒體查詢)" href="xx.css">
// 當視口寬度小于等于 768px 時，引入 pink.css 這個文件
<link rel="stylesheet" media="screen and (max-width: 768px)" href="./pink.css">
- 簡寫寫法（常用）
<link rel="stylesheet" media=" (媒體查詢)" href="xx.css">
// 當視口寬度大于等于 1200px 時，引入 green.css 這個文件
<link rel="stylesheet" media="(min-width: 1200px)" href="./green.css">
這種寫法是動態加載 CSS，只有滿足媒體查詢時，html 才加載 CSS 文件，當不滿足的時候，html 就移除這個 CSS 文件，并不是滿足時加載之后，就一直加載了，不滿足時還會移除這個 CSS 文件。
三、Bootstrap
1、Bootstrap 簡介
Bootstrap 是由 Twitter 公司開發維護的前端 UI 框架，它提供了大量編寫好的 CSS 樣式，允許開發者結合一定 HTML 結構及 JavaScript，快速編寫功能完善的網頁及常見交互效果。
2、Bootstrap 下載
- 下載步驟：Bootstrap 中文文檔 → 下載 → Bootstrap 生產文件
3、Bootstrap 使用
這里只簡單的講解一下 Bootstrap 的使用，這個框架功能很多，如果要全部講解，能夠專門開一個專欄講解了。網上也有很多講解這個框架怎么使用的博客是視頻，感興趣的同學可以自行去找。
-
將下載解壓好的文件拖入到工程。
-
引入 Bootstraps CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
- 調用類名：
container：響應式布局版心居中類。
<div class="container">版心居中</div>
4、Bootstrap 柵格系統
柵格化是指將整個網頁視口的寬度分成12等份，每個盒子占用的對應的分數。
例如：一行排 4 個盒子，則每個盒子占 3 份，即（12 / 4 = 3）。
使用柵格布局，要使用類名為
row的元素作為父級，子級才能使用柵格系統布局。
柵格系統布局以
col-*-*的格式作為類名，如：col-xl-3表示當視口寬度大于等于 1200px 時，該元素占了 3 份，即該元素寬度占視口寬度的 1/4 。
估計這對于新接觸這個框架的同學有很多疑問，為什么這么寫類名、為什么這么寫就能實現這些功能等等，但是這些類名的命名和寫法是框架開發者規定的，必須這么寫，我們只能通過多寫多練，將這些常用的類名記住，沒有其他捷徑。
下面通過一個例子，幫助大家理解：
<head><title>柵格系統</title><link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head><body><!-- 視口寬度大于等于1200px，一個盒子占3份, 即一行排4個視口寬度大于等于768px，一個盒子占6份, 即一行排2個視口寬度大于等于576px，一個盒子占12分, 即一行排1個...沒有書寫順序的要求--><!-- 版心 → row → 子級 --><div class="container"><div class="row"><div class="col-sm-12 col-md-6 col-xl-3" style="background-color: red;">1</div><div class="col-sm-12 col-md-6 col-xl-3" style="background-color: yellow;">2</div><div class="col-sm-12 col-md-6 col-xl-3" style="background-color: green;">3</div><div class="col-sm-12 col-md-6 col-xl-3" style="background-color: pink;">4</div></div></div>
</body>
5、Bootstrap Button 類
Bootstrap 提供了很多 Button 類 的樣式，也不用刻意去背，使用的時候知道在哪里找就可以了。
6、Bootstrap 表格類
Bootstrap 提供了很多 表格類 的樣式，感興趣的同學可以去看一看。
此外，Bootstrap 還提供了現成的組件、字體圖標等等，感興趣的同學可以了解下。
四、綜合案例-騰訊全端
接下來通過今日所學的媒體查詢和 Bootstrap 框架，模仿騰訊全端實現下面的響應式布局效果。
想要完整代碼的，點擊這里獲取Day14綜合案例完整代碼。完全免費，僅供學習參考使用。
、plt.xlim() 和 plt.ylim()函數)
