CSS 媒體查詢 - 實例
CSS 媒體查詢 - 更多實例
讓我們看看使用媒體查詢的更多例子。
媒體查詢是一種流行的技術，用于將定制的樣式表傳遞給不同的設備。
下面演示一個簡單的例子，讓我們來更改不同設備的背景色：
實例
/* 將 body 的背景色設置為棕褐色 */
body {
background-color: tan;
}
/* 在小于或等于 992 像素的屏幕上，將背景色設置為藍色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在 600 像素或更小的屏幕上，將背景色設置為橄欖色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
您想知道我們為什么要精確使用 992px 和 600px 嗎？它們就是我們所稱的設備的“典型斷點”（typical breakpoints）。您可以在我們的 響應式 Web 設計教程 中學習有關典型斷點的更多知識。
菜單的媒體查詢
在本例中，我們使用媒體查詢來創建響應式導航菜單，該菜單在不同的屏幕尺寸上會有所不同。
實例
/* navbar 容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar 鏈接 */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 在寬度為 600 像素或更小的屏幕上，使菜單鏈接彼此堆疊，而不是并排 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
列的媒體查詢
媒體查詢的常見用法是創建彈性布局。在本例中，我們創建了一個布局，該布局在四列、兩列和全寬列之間變化，具體取決于不同的屏幕尺寸：
大型屏幕：
中等屏幕：
小型屏幕：
實例
/* 創建彼此相鄰浮動的四個相等的列 */
.column {
float: left;
width: 25%;
}
/* 在 992p x或更小的屏幕上，從四列變為兩列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在寬度小于或等于 600 像素的屏幕上，使各列堆疊，而不是并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
提示：更現代的創建列布局方法是使用 CSS Flexbox（請參見下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，請使用浮動（如上所示）。
如需學習有關彈性框布局模塊的更多知識，請學習 CSS Flexbox 這一章。
如需學習有關響應式 Web 設計的更多知識，請學習我們的 響應式 Web 設計教程。
實例
/* 彈性盒的容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 創建四個相等的列 */
.column {
flex: 25%;
padding: 20px;
}
/* 在 992px 或更小的屏幕上，從四列變為兩列 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 在寬度小于或等于 600 像素的屏幕上，使各列堆疊，而不是并排 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
用媒體查詢隱藏元素
媒體查詢的另一種常見用法是在不同屏幕尺寸上隱藏元素：
在小屏幕上我會隱藏。
實例
/* 如果屏幕尺寸為600像素或更小，請隱藏該元素 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
用媒體查詢改變字體
您還可以使用媒體查詢來更改不同屏幕尺寸上的元素的字體大小：
可變的字體大小。
實例
/* 如果屏幕尺寸超過 600 像素，把 <div> 的字體大小設置為 80 像素 */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕大小為 600px 或更小，把 <div> 的字體大小設置為 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
方向：人像 / 風景
媒體查詢還可以用于根據瀏覽器的方向更改頁面的布局。
您可以設置一組 CSS 屬性，這些屬性僅在瀏覽器窗口的寬度大于其高度時才適用，即所謂的橫屏：
實例
如果方向處于橫向模式，則使用淺藍背景色：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
最小寬度到最大寬度
您還可以使用 max-width 和 min-width 屬性設置最小寬度和最大寬度。
例如，當瀏覽器的寬度在 600 到 900 像素之間時，更改 <div> 元素的外觀：
實例
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
使用附加值：在下面的例子中，我們使用逗號（類似 OR 運算符）將附加的媒體查詢添加到已有媒體查詢中：
實例
/* 當寬度在 600 像素到 900 像素之間或大于 1100 像素時 - 更改 <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 規則。
提示：如需學習有關響應式 Web 設計（如何針對不同的設備和屏幕）的更多知識，以及使用媒體查詢斷點，請閱讀我們的 響應式 Web 設計教程。
