2.1 媒體查詢基礎
媒體查詢（media queries） 是創建響應式網站的關鍵工具之一。它可以根據不同的設備和螢幕尺寸調整樣式，以確保最佳的顯示和使用便利。接下來，我們將介紹媒體查詢的使用基礎、語法以及為不同螢幕調整樣式的示例。
媒體查詢 使用 @media 規則，這使得在滿足特定條件時才應用特定樣式。條件可以包括螢幕尺寸、解析度、方向和其他參數。
語法：
@media media-type and (media-feature) {
/* 樣式 */
}
其中：
media-type：媒體類型，樣式將針對這種類型應用。最常用的是 screenmedia-feature：媒體特性，例如寬度、高度、方向等。
示例：
- 在此示例中，如果螢幕寬度不超過 768 像素，頁面背景將變為淺藍色。
CSS
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 媒體查詢類型
1. 寬度和高度查詢
這些媒體查詢允許根據視窗的寬度和高度變化樣式。
示例：
CSS
/* 當螢幕寬度小於或等於 768px 時應用樣式 */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 當螢幕高度大於 800px 時應用樣式 */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. 方向（orientation）
根據螢幕方向查詢可使樣式適應設備處於豎直（portrait）或橫向（landscape）模式。
示例：
CSS
/* 為豎直方向應用樣式 */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* 為橫向方向應用樣式 */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. 像素密度（resolution）
根據像素密度的媒體查詢可使樣式適應具有不同像素密度的設備，如 Retina 螢幕。
示例：
CSS
/* 為像素密度 2x 及以上的螢幕應用樣式 */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* 為像素密度低於 2x 的螢幕應用樣式 */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 組合媒體查詢
媒體查詢可以通過邏輯運算符 and、not 和 only 組合。
示例
使用運算符 and：
CSS
/* 為螢幕寬度在 600px 和 1200px 之間的設備應用樣式 */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
使用運算符 not：
CSS
/* 為所有設備應用樣式，除了那些螢幕寬度小於 600px 的 */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
使用運算符 only：
CSS
/* 僅為螢幕應用樣式 */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION