關於響應式佈局,你需要了解的知識點

張哥說技術發表於2023-12-19

關於響應式佈局,你需要了解的知識點

來源:樹哥聊程式設計

大家好,我是樹哥。

相信大家都知道我最近在學習前端知識,最近學到了響應式這塊的內容。既然學到這塊內容,那我必然會遵循「理論 - 實踐 - 總結」的學習方法,這篇文章就是我對響應式知識的簡單總結。

什麼是響應式佈局?

響應式佈局,就是根據不同裝置展示不同的佈局,以免更方便使用者瀏覽頁面。 舉個很簡單的例子,我們在電腦上瀏覽網頁,螢幕非常大,這時候可能採用的是如下圖所示的佈局方式。這種佈局方式很寬敞,能夠容納的內容也很多,能夠最大程度地傳遞資訊。

關於響應式佈局,你需要了解的知識點

如果是在類似於 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;
    }
}

隨後,我們再繼續在 pcipad 對應的 div 塊中實現相應的 html 結構和 CSS 樣式即可。在這個過程中,可能不僅涉及到隱藏,還會涉及到其他的佈局變動,例如:在小螢幕時是 display: block,而在大螢幕的時候則是 display: flex。在小螢幕的時候可能是 flex-direction: column,而在大螢幕的時候則是 flex-direction: row等等。

對於設計師來說,響應式佈局就是針對不同的螢幕媒介,設計不同的佈局方式,讓使用者更簡單方便地閱讀資訊。對於開發者來說,響應式佈局就是使用 @mediadisplay:nonedisplay: 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


來自 “ ITPUB部落格 ” ,連結:https://blog.itpub.net/70024923/viewspace-3000558/,如需轉載,請註明出處,否則將追究法律責任。

相關文章