CSS媒體查詢總結
阿新 • • 發佈:2017-06-13
guid 匹配 chrome lang dia 查詢 mce 結果 font
屬性查詢上 )。在逗號媒體查詢列表中
1媒體查詢概念
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能限制樣式表範圍的表達式組成, 例如 寬度,高度和顏色。在CSS3中添加的媒體查詢,允許內容的呈現針對一個特定範圍的輸出設備而定制,而不必改變內容本身。
2媒體查詢的兩種引入方式
<!-- link元素中的CSS媒體查詢 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 樣式表中的CSS媒體查詢 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
3邏輯操作符
可以使用
not
,and
和 only 等邏輯操作符
構建復雜的媒體查詢。and
操作符用來把多個 媒體屬性 組合成一條媒體查詢。只有當每個屬性都為真時,結果才為真。not
操作符用來對一條媒體查詢的結果進行取反。only
操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用。若使用了 not
或 only
操作符,必須明確指定一個媒體類型。
and
and
關鍵字用於合並多個媒體屬性或合並媒體屬性與媒體類型。一個基本的媒體查詢,即一個媒體屬性與默認指定的 all
媒體類型,可能像這樣子:
@media (min-width: 700px) { ... }
如果你只想在橫屏時應用這個,你可以使用 and
操作符合並媒體屬性:
(min-width: 700px) and (orientation: landscape) { ... }
or
媒體查詢中使用逗號分隔效果等同於 or
邏輯操作符。
例如,如果你想在最小寬度為700像素或是橫屏的手持設備上應用一組樣式,你可以這樣寫:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not
not
關鍵字應用於整個媒體查詢,在媒體查詢為假時返回真 (比如 monochrome
應用於彩色顯示設備上或一個600像素的屏幕應用於 min-width: 700px
not
僅會否定它應用到的媒體查詢上而不影響其它的媒體查詢。 not
關鍵字僅能應用於整個查詢,而不能單獨應用於一個獨立的查詢。例如,not
在下面的查詢中最後被計算:
@media not all and (monochrome) { ... }
CSS媒體查詢總結