前端系列教學(入門篇) - 響應式設計（2）

(預計閱讀時間：25分鐘，推薦使用電腦閱讀)

傳送門：

前端系列教學(入門篇) - 響應式設計（1）

上一篇介紹了 viewport，在這一篇我會介紹 Media Query 媒體查詢

什麼是 Media Query 媒體查詢 ？

在如今的生活中，網頁可能會被在任何電子設備中訪問（電腦，手機，平板，電視，手錶，等等）。

Media Query 媒體查詢 可以讓網頁能夠根據 設備屬性的不同（例如，屏幕寬度，高度，方向，高寬比，等等）而應用不同的 CSS 樣式。

這樣我們就能讓網頁能夠在各種設備中都表現出我們想要的樣式。

基本用法

一個媒體查詢 包含一個可選的 媒體類型 和 零個或多個 表達式，這些 表達式 描述了 媒體特徵，最終會被解析為 true 或 false。如果顯示網頁的設備 符合 媒體類型，並且 表達式結果 都為 true。那麼這個 媒體查詢 所對應的 樣式 就會被引入HTML文檔。

1. 引用media query

在這裡我介紹 兩種 方式去添加 media query：<link>鏈接引入，@media代碼嵌入

<link>鏈接引入

在以往我們都是這樣通過 <link> 標籤直接引入 CSS樣式。

<link rel="stylesheet" href="style.css">

現在通過向<link>元素中添加 media 屬性，我們就可以讓 CSS樣式 變得有選擇的去引入。

<link rel="stylesheet" media="screen and (min-width:600px)" href="over600.css">

上面代碼的意思就是，如果在電腦/手機/平板屏幕上顯示網頁，並且 viewport 的寬度大於等於 600px，那麼樣式表「over600.css」就會被引入。

在日常開發中，基本上我們只會用到 "screen" 這個媒體類型。

• screen：用於電腦屏幕，平板電腦，智能手機等。

@media代碼嵌入

你也可以直接在 CSS樣式表中 通過 @media 嵌入 media query 代碼。

@media screen and (min-width: 600px) { body {background-color: yellow;}}

上面代碼意思是，如果在電腦/手機/平板屏幕上顯示網頁，並且 viewport 的寬度大於等於 600px，那麼 body元素 的背景色就會被設置成黃色。

使用 <link>鏈接引入 會讓<link>標籤變多，HTTP 請求變多。

使用 @media代碼嵌入 會讓 CSS樣式表 變大。

具體選擇哪個，根據情況不同自己選擇。在以後講到性能的時候，我們再分析這些。現在你就隨自己喜歡選擇吧。

2. 斷點 breaking point

在上面的代碼中min-width: 600px，當 屏幕視口寬度 大於 600px 的時候，樣式生效。那麼 600px 就是一個 斷點。

上圖中隨著 瀏覽器視口 寬度的變化，頁面布局發生變化。

可見 斷點 就是 頁面布局 發生變化時 的 可見區域 視口寬度的值。

我們通過min-width 和 max-width 來定義。

• min-width ：定義輸出設備中的頁面最小可見區域寬度。
• max-width ：定義輸出設備中的頁面最大可見區域寬度。

3. 在哪裡加斷點 ？

其實這張圖就很清楚啦，根據顯示設備的不同，我們在合適的位置打上斷點。

• @media (max-width: 600px) { ... }：手機端
• @media (min-width: 600px) and (max-width: 900px) { ... }：平板電腦
• @media (min-width: 900px) and (max-width: 1200px) { ... }：中等屏幕台式電腦
• @media (min-width: 1200px) { ... }：大屏幕台式電腦

（當然這些數值，還是要看具體情況，具體設置的，並不絕對。）

實際操作吧！

最終結果：

在移動端，我們要讓 側邊欄 和 主欄 垂直排在同一列。

我們還要 導航欄nav 和 標題h1 在 <header> 垂直排在同一列。

首先我們 CSS樣式里，寫入

@media screen and (max-width: 600px) {}/* 當視口寬度小於600px（移動端）應用上面樣式 */@media screen and (min-width: 600px) {}/* 當視口寬度大於600px（桌面端）應用上面樣式 */

之後，把之前的 主欄 和 側邊欄 的百分比布局樣式

.index-main { width: 75%; }.index-aside { width: 25%; padding-left: 20px;}

挪到@media screen and (min-width: 600px) {}

@media screen and (min-width: 600px) { .index-main { width: 75%; } .index-aside { width: 25%; padding-left: 20px; }}

也就是說，只有當 視口寬度 大於600px 的時候，才會按照上面樣式排列。

之後，在@media screen and (max-width: 600px)中寫入代碼

@media screen and (max-width: 600px) { .index-header { flex-direction: column; } /* 標題 和 導航 垂直排列 */ .index-container { flex-direction: column; /* 主欄 和 側邊欄 垂直排列 */ } .index-main { width: 100%; /* 垂直排列的時候占父元素100%寬度 */ } .index-aside { width: 100%; /* 垂直排列的時候占父元素100%寬度 */ }}

當時我們發現 導航欄 nav 和 標題 沒對齊。

審查元素後發現 <nav> 中的 <ul> 前面有個 padding。下面把它去掉。

在@media screen and (max-width: 600px)添加：

.index-header-nav ul { padding: 0;}

之後我們就完成啦! ??????

預覽頁面，我的代碼保存在Github - 練習4源代碼。如果遇到問題，大家可以當做參考。

好啦，今天的教程就告一段落啦。

如果喜歡的話就點個關注吧！謝謝各位的支持！

如果有寶貴意見，也請大家多多留言！