媒體查詢是css3的新增特性，可以進行頁面的響應式設計；使用「@media」查詢，可以用於針對不同的媒體類型定義不通過的樣式，也可以針對不同的螢幕尺寸樣式設定不同的樣式，語法為「@media [媒體介質] and|or (條件) and|or (條件){樣式}」。
本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
1.媒體查詢是css3新的特性，可進行頁面的響應式設計。
2.可以對不同的螢幕，不同的解析度設計多套不同的樣式。
媒體查詢語法
@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
CSS 語法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}not, and, 和 only 可用於聯合建構複雜的媒體查詢，您也可以透過以逗號分隔多個媒體查詢，將它們組合為一個規則。
not, only 和and 關鍵字意義:
not: not 運算子用於否定媒體查詢，如果不滿足這個條件則回傳true，否則回傳false 。如果出現在以逗號分隔的查詢清單中，它將僅否定套用了該查詢的特定查詢。如果使用 not 運算符，則也必須指定媒體類型。
only: only 運算子僅在整個查詢匹配時才用於應用樣式，並且對於防止較早的瀏覽器應用所選樣式很有用。當不使用 only 時，舊版的瀏覽器會將 screen and (max-width: 500px) 簡單地解釋為 screen，忽略查詢的其餘部分，並將其樣式應用於所有螢幕。如果使用 only 運算符，則也必須指定媒體類型。
, (逗號) 逗號用於將多個媒體查詢合併為一個規則。逗號分隔清單中的每個查詢都與其他查詢分開處理。因此，如果清單中的任何查詢為 true，則整個 media 語句都會傳回 true。換句話說，列表的行為類似於邏輯或 or 運算子。
and: and 運算子用於將多個媒體查詢規則組合成單一媒體查詢，當每個查詢規則都為真時則該條媒體查詢為真，它還用於將媒體功能與媒體類型結合在一起。
媒體類型（Media types）描述裝置的一般類別。除非使用 not 或 only 邏輯操作符，媒體類型是可選的，並且會（隱含地）套用 all 類型。
你也可以針對不同的媒體使用不同樣式檔案:
<!-- 宽度大于 900px 的屏幕使用该样式 --> <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <!-- 宽度小于或等于 600px 的屏幕使用该样式 --> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
以上是媒體查詢是不是css3新增屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
