CSS 媒體查詢 - 示例
CSS 媒體查詢 - 更多示例
讓我們來看一些使用媒體查詢的更多示例。
媒體查詢是為不同裝置提供定製樣式表的一種流行技術。為了演示一個簡單的例子，我們可以為不同的裝置更改背景顏色
示例
/* 將 body 的背景顏色設定為 tan */
body {
background-color: tan;
}
/* 在螢幕寬度小於等於 992px 時，將背景顏色設定為藍色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在螢幕寬度小於等於 600px 時，將背景顏色設定為 olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
自己動手試一試 »
您是否想知道為什麼我們使用 992px 和 600px？它們是我們稱之為裝置的“典型斷點”。您可以在我們的響應式網頁設計教程中瞭解更多關於典型斷點的資訊。
選單的媒體查詢
在此示例中，我們使用媒體查詢建立了一個響應式導航選單，其設計在不同的螢幕尺寸下有所不同。
大螢幕
小螢幕
示例
/* 導航欄容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航欄連結 */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 在螢幕寬度小於等於 600px 時，使菜單鏈接堆疊在一起而不是並排顯示 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
自己動手試一試 »
列的媒體查詢
媒體查詢的一個常見用途是建立靈活的佈局。在此示例中，我們建立了一個佈局，該佈局根據不同的螢幕尺寸在四列、兩列和全寬列之間進行切換
大螢幕
中等螢幕
小螢幕
示例
/* 建立四等分浮動列 */
.column {
float: left;
width: 25%;
}
/* 在螢幕寬度小於等於 992px 時，從四列變為兩列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在螢幕寬度小於等於 600px 時，使列堆疊在一起而不是並排顯示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己動手試一試 »
提示：建立列布局的更現代方法是使用 CSS Flexbox（參見下面的示例）。但是，它不支援 Internet Explorer 10 及更早版本。如果您需要 IE6-10 支援，請使用浮動（如上所示）。
要了解有關 Flex Box 佈局模組的更多資訊，請閱讀我們的 CSS Flexbox 章節。
要了解有關響應式網頁設計的更多資訊，請閱讀我們的響應式網頁設計教程。
示例
/* Flexbox 的容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 建立四等分列 */
.column {
flex: 25%;
padding: 20px;
}
/* 在螢幕寬度小於等於 992px 時，從四列變為兩列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 在螢幕寬度小於等於 600px 時，使列堆疊在一起而不是並排顯示 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
自己動手試一試 »
使用媒體查詢隱藏元素
媒體查詢的另一個常見用途是隱藏不同螢幕尺寸下的元素
示例
/* 如果螢幕尺寸小於等於 600px，則隱藏元素 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
自己動手試一試 »
使用媒體查詢更改字型大小
您還可以使用媒體查詢來更改元素在不同螢幕尺寸下的字型大小
可變字型大小。
示例
/* 如果螢幕尺寸大於 600px，則將 <div> 的 font-size 設定為 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 如果螢幕尺寸小於等於 600px，則將 <div> 的 font-size 設定為 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己動手試一試 »
靈活的圖片庫
在此示例中，我們將媒體查詢與 flexbox 結合使用來建立響應式圖片庫
靈活的網站
在此示例中，我們將媒體查詢與 flexbox 結合使用來建立響應式網站，其中包含靈活的導航欄和靈活的內容。
方向：肖像/風景
媒體查詢還可以根據瀏覽器的方向更改頁面的佈局。
您可以設定一組 CSS 屬性，這些屬性僅在瀏覽器視窗的寬度大於其高度時應用，即所謂的“風景”方向
示例
如果方向為風景模式，則使用淺藍色背景色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己動手試一試 »
最小寬度到最大寬度
您還可以使用 (max-width: ..) and (min-width: ..) 值來設定最小寬度和最大寬度。
例如，當瀏覽器的寬度在 600px 到 900px 之間時，更改 <div> 元素的外觀
示例
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自己動手試一試 »
使用附加值：在下面的示例中，我們透過逗號將另一個媒體查詢新增到我們已有的媒體查詢中
示例
/* 當寬度在 600px 到 900px 之間或大於 1100px 時 - 更改 <div> 的外觀 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自己動手試一試 »
CSS @media 參考
有關所有媒體型別和功能/表示式的完整概述，請參閱我們 CSS 參考中的 @media 規則。
提示：要了解有關響應式網頁設計（如何針對不同裝置和螢幕）以及使用媒體查詢斷點的更多資訊，請閱讀我們的響應式網頁設計教程。
