媒體查詢是css3新增屬性的嗎

本文小編為大家詳細介紹“媒體查詢是css3新增屬性的嗎”，內容詳細，步驟清晰，細節處理妥當，希望這篇“媒體查詢是css3新增屬性的嗎”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

媒體查詢是css3的新增特性，可以進行頁面的響應式設計；使用“@media”查詢，可以用于針對不同的媒體類型定義不通過的樣式，也可以針對不同的屏幕尺寸樣式設置不同的樣式，語法為“@media [媒體介質] and|or (條件) and|or (條件){樣式}”。

本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

媒體查詢是不是css3新增屬性

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新增屬性的嗎”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。