讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術,用於向不同的設備提供定製的樣式表。爲了演示一個簡單的示例,我們可以更改不同設備的背景顏色
/* 將body的背景顏色設置爲tan */
body {
background-color: tan;
}
/* 在992px或更低的屏幕上,將背景顏色設置爲藍色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在600px或更低的屏幕上,將背景顏色設置爲橄欖色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
列的媒體查詢
媒體查詢的常見用途是創建靈活的佈局。在此示例中,我們創建的佈局在四個,兩個和全寬列之間變化,具體取決於不同的屏幕大小:
.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%;
}
}
使用媒體查詢更改字體大小
您還可以使用媒體查詢來更改不同屏幕大小的元素的字體大小:
/* 如果屏幕大小超過600px寬,請將字體大小設置爲80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸爲600px或更小,請將字體大小設置爲30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
使用附加值:在下面的示例中,我們使用逗號向我們現有的媒體查詢添加其他媒體查詢(這將像OR運算符一樣):例如當寬度介於600px和900px之間或高於1100px時 - 改變外觀
@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;
}
}