在當今的互聯網世界中，移動設備已經成為了人們生活中必不可少的一部分。為了保證建立的網頁在不同的設備中都能得到良好的顯示效果，CSS媒體查詢成為了瀏覽器中非常重要的一部分。本文將為您介紹一份CSS媒體查詢大全。

/* 大小媒體查詢 */
@media screen and (min-width: 480px) {
/* 樣式代碼 */
}
@media screen and (min-width: 768px) {
/* 樣式代碼 */
}
@media screen and (min-width: 992px) {
/* 樣式代碼 */
}
@media screen and (min-width: 1200px) {
/* 樣式代碼 */
}

這里展示了4種不同的大小媒體查詢，可以根據需要自由調整。在480px以下，768px以下，992px以下，1200px及以上時，使用不同的樣式代碼。這樣可以為不同的設備提供不同的顯示效果。

/* 顏色媒體查詢 */
@media screen and (max-width: 640px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
body {
background-color: yellow;
}
}
@media screen and (min-width: 1025px) {
body {
background-color: red;
}
}

這里展示了3種不同的顏色媒體查詢，可以根據不同的屏幕大小來為不同的設備設置不同的背景顏色。

/* 旋轉媒體查詢 */
@media screen and (orientation: portrait) {
/* 樣式代碼 */
}
@media screen and (orientation: landscape) {
/* 樣式代碼 */
}

旋轉媒體查詢可以根據設備的方向為其提供不同的顯示效果。當設備處于豎屏狀態時觸發“portrait”，橫屏狀態時觸發“landscape”。

/* 手機橫屏媒體查詢 */
@media screen and (max-device-width: 480px) and (orientation: landscape) {
/* 樣式代碼 */
}

手機橫屏媒體查詢可以通過限制最大設備寬度，并要求設備處于橫屏狀態，來為手機橫屏時提供不同的顯示效果。

以上是本文介紹的部分CSS媒體查詢。您可以根據需求自由選擇適合自己的媒體查詢。希望這份CSS媒體查詢大全能夠對您有所幫助。