关于响应式布局，你需要了解的知识点
大家好，我是樹哥。
相信大家都知道我最近在學習前端知識，最近學到了響應式這塊的內容。既然學到這塊內容，那我必然會遵循「理論 - 實踐 - 總結」的學習方法，這篇文章就是我對響應式知識的簡單總結。
什么是響應式布局？
響應式布局，就是根據不同設備展示不同的布局，以免更方便用戶瀏覽頁面。 舉個很簡單的例子，我們在電腦上瀏覽網頁，屏幕非常大，這時候可能采用的是如下圖所示的布局方式。這種布局方式很寬敞，能夠容納的內容也很多，能夠最大程度地傳遞信息。
如果是在類似于 iPad Pro 的平板電腦上，由于屏幕大小原因，我們會使用不一樣的布局。對于美團官網來說，他們就把頂部的導航欄隱藏起來，需要通過點擊左上角的菜單按鈕才能顯示，如下圖所示。
如果是在更小的手機屏幕上，那不僅導航欄要隱藏起來，就連下面的文章列表也只能一行顯示一篇文章，如下圖所示。
總結一下，所謂的響應式布局，就是根據不同的瀏覽介質，制定不同的布局方案，以便于用戶更好地瀏覽信息。
快速入門
了解完響應式布局原理，我們從代碼層面來看看如何實現這樣的響應式布局。
在 CSS3 中，定義了 @media 這個屬性來實現響應式效果。例如我們希望在屏幕尺寸低于 768px 的時候顯示黑色，大于 768px 的時候顯示紅色，那么我們可以這么寫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>響應式布局例子</title>
<style type="text/css">
body {
background-color: black;
}
@media (min-width:768px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>
上面代碼的運行效果如下圖所示。我們手動改變窗口的大小，當窗口的大小大于 768px 的時候，窗口的背景顏色變成了紅色。當窗口大小小于 768px 的時候，窗口背景顏色變回了黑色。
在上面的代碼中，最核心的代碼是如下這段代碼，如下代碼所示。
@media (min-width:768px) {
body {
background-color: red;
}
}
上面這段 CSS 表示：當寬度最小為 768px 的時候，窗口的背景顏色設置為紅色。
這個例子只是為了簡潔地向大家解釋響應式布局的使用，在實際的項目使用中，響應式布局的使用會更加復雜一些。但無論如何復雜，它都是由最基本的單元組成。你理解了這個例子，你就能理解實戰項目中的響應式布局。
實戰案例
上面舉了一個小案例，向大家簡單說明了如何使用 @media 實現響應式布局。這里我再舉一個實戰項目的例子，讓大家更深刻地理解響應式布局。
我們還是舉美團官網這個例子：美團官網在瀏覽器寬度小于 1280px 的時候，會將導航欄隱藏起來。在導航欄寬度大于 1280px 的時候，會講導航欄顯示出來，如下圖所示。
為了較好地解釋實現原理，我們用如下的 html 代碼代表美團導航欄的實現。
<div>
<div class="pc"></div>
<div class="ipad"></div>
</div>
那么美團官網是如何去實現這樣的響應式效果的呢？
其實實現這樣的效果很簡單，只需要實現這樣的邏輯即可：默認情況下，顯示 ipad 類對應的 div 塊，隱藏 pc 類對應的 div 塊。當瀏覽器的寬度大于 1280px，那就隱藏 ipad 類對應的 div 塊，顯示 pc 類對應的 div 塊。實現的 CSS 代碼如下所示。
.pc {
display: none;
}
.ipad {
display: block;
}
@media (min-width:1280px) {
.pc {
display: block;
}
.ipad {
display: none;
}
}
隨后，我們再繼續在 pc 和 ipad 對應的 div 塊中實現相應的 html 結構和 CSS 樣式即可。在這個過程中，可能不僅涉及到隱藏，還會涉及到其他的布局變動，例如：在小屏幕時是 display: block，而在大屏幕的時候則是 display: flex。在小屏幕的時候可能是 flex-direction: column，而在大屏幕的時候則是 flex-direction: row等等。
對于設計師來說，響應式布局就是針對不同的屏幕媒介，設計不同的布局方式，讓用戶更簡單方便地閱讀信息。對于開發者來說，響應式布局就是使用 @media、display:none、display: flex 等各種工具，來實現設計師想要的各種布局方式。
響應式語法
弄清楚了響應式布局的道，我們還需要弄清楚響應式布局的術 —— 也就是語法！
對于響應式布局來說，它就只有一個語法 —— @media，它的語法格式如下所示。
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
上述語法可以分為兩部分，分別是 mediatype 部分和 mediafeature 部分。
mediatype
mediatype 代表媒體類型，例如：電腦屏幕、平板電腦、打印機等。對于 mediatype 部分來說，其前面可以加上 not 或者 only 修飾符來分別表示「否」或者「只有」的意思。mediatype 常用取值有如下幾個：
- all 用于所有設備
- print 用于打印機和打印預覽
- screen 用于電腦屏幕，平板電腦，智能手機等。
- speech 應用于屏幕閱讀器等發聲設備
- 等等
更多的媒體類型取值可參考：@media - CSS: Cascading Style Sheets | MDN。
舉個很簡單的例子，我們只想針對打印機或打印機預覽使用某些 CSS 樣式，那么我們可以這么寫：
@media print {
/* … */
}
如果我們只想對除了打印機或打印機預覽之外的其他所有設備適用，那么我們可以這么寫：
@media not print {
/* … */
}
mediatype 部分可以不填，不填的時候默認取 all 值，表示對于所有設備都適用。
mediafeature
mediafeature 代表媒體特性，例如：顏色、寬度、高度等。對于 mediafeature 部分來說，其可以使用 and、or、not 來組成一組判斷語句，從而實現更加復雜的功能。mediafeature 常用取值有如下幾個：
- height 定義輸出設備中的頁面可見區域高度
- height 定義輸出設備中的頁面可見區域高度
- min-resolution 定義設備的最小分辨率
- max-resolution 定義設備的最大分辨率
- grid 用來查詢輸出設備是否使用柵格或點陣
- 等等
更多的媒體特性取值可參考：@media - CSS: Cascading Style Sheets | MDN
舉個很簡單的例子，我們想針對所有屏幕寬度小于768px的設備應用某些樣式，那么我們可以這么寫：
@media (max-width:768px) {
/* … */
}
如果我們想針對所有屏幕寬度小于 768px 并且屏幕高度小于 500px 的設備應用某些樣式，那么我們可以這么寫：
@media (max-width:768px and max-height: 500px) {
/* … */
}
總結
看到這里，相信大家都已經能理解響應式布局的含義了。
其實響應式布局并不難，其語法也很簡單，更重要的是理解響應式布局背后的重要意義 —— 信息傳遞。在不同的信息傳遞媒介，為了閱讀者地體驗，我們應該設計不同的布局方式，需要思考應該傳遞哪些信息。我們只有擁有了這樣的意識，我們才能做出讓用戶拍手叫好的產品，做出讓用戶用著感覺酣暢淋漓的作品！
按我自己的理解，目前響應式布局更多還是在各類官網的使用上，因為這些場景更看懂信息的傳遞，需要在不同的信息傳遞媒介都能有很好的體驗效果。除此之外，其他的類似于管理后臺、工具類站點，使用到響應式布局的需求還是非常少的。
這次關于響應式布局的分享就到此結束，如果你喜歡這篇文章，那就點贊支持轉發支持我吧！
參考資料
- CSS3 @media查詢 | 菜鳥教程
- @media - CSS: Cascading Style Sheets | MDN
- CSS前瞻：@media (scripting)助你優雅降級 - 掘金
- 【CSS】關于媒體查詢media那些事兒 - 掘金
總結
以上是生活随笔為你收集整理的关于响应式布局，你需要了解的知识点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 税盘是干什么用的 什么叫税盘
- 下一篇： N100低功耗win11安装wsl2当入