CSS媒體查詢

媒體查詢 包含了一個媒體類型和至少一個使用如寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達(dá)式。CSS3加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的不同大小的設(shè)備。即響應(yīng)式布局。

當(dāng)媒體查詢?yōu)檎鏁r，相關(guān)的樣式表或樣式規(guī)則就會按照正常的級聯(lián)規(guī)則被應(yīng)用。即使媒體查詢返回假，<link>標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應(yīng)用）。

在不使用 not 或 only 操作符的情況下，媒體類型是可選的，默認(rèn)為 all 。

媒體查詢是大小寫不敏感的。包含未知媒體類型的查詢通常返回假。

邏輯操作符

操作符 not，and 和 only 可以用來構(gòu)建復(fù)雜的媒體查詢。

• and 操作符用來把多個 媒體屬性 組合起來，合并到同一條媒體查詢中。只有當(dāng)每個屬性都為真時，這條查詢的結(jié)果才為真。

• not 操作符用來對一條媒體查詢的結(jié)果進(jìn)行取反。not 關(guān)鍵字僅能應(yīng)用于整個查詢，而不能單獨應(yīng)用于一個獨立的查詢。

• only 操作符表示僅在媒體查詢匹配成功的情況下應(yīng)用指定樣式。可以通過它防止老舊的瀏覽器不支持帶媒體屬性的查詢而應(yīng)用到給定的樣式。

若使用了 not 或 only 操作符，必須明確指定一個媒體類型。

你也可以將多個媒體查詢以逗號分隔放在一起；只要其中任何一個為真，整個媒體語句就返回真。相當(dāng)于 or 操作符。

大多數(shù)媒體屬性帶有“min-”和“max-”前綴，用于表達(dá)“小于等于”和“大于等于”。這避免了使用與HTML和XML沖突的“<”和“>”字符。如果你未向媒體屬性指定一個值，并且該特性的實際值不為零，則該表達(dá)式被解析為真。

媒體屬性

<!-- link元素中的CSS媒體查詢 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 樣式表中的CSS媒體查詢 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;
  }}</style>

• orientation 方向

• portrait 豎屏

• landscape 橫屏

• resolution 分辨率 指定輸出設(shè)備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點數(shù)來表示。

• tv 電視媒體

• handheld 手持設(shè)備

• monochrome 黑白 指定了一個黑白（灰度）設(shè)備每個像素的比特數(shù)。如果是黑白設(shè)備，值為1。

• color 能顯示顏色的設(shè)備

• min-color 每個顏色單元至少有n個比特

• color-index 指定了輸出設(shè)備中顏色查詢表中的條目數(shù)量。

• min-color-index: 256 至少256個索引顏色的設(shè)備

• aspect-ratio 寬高比 該值包含兩個以“/”分隔的正整數(shù)。代表了水平像素數(shù)（第一個值）與垂直像素數(shù)（第二個值）的比例。

• device-aspect-ratio 設(shè)備寬高比

• device-height

• device-width

• grid 判斷輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備。如果設(shè)備是基于網(wǎng)格的（例如電傳打字機(jī)終端或只能顯示一種字形的電話），該值為1，否則為0。

• height 媒體屬性描述了輸出設(shè)備渲染區(qū)域（如可視區(qū)域的高度或打印機(jī)紙盒的高度）的高度。

• width

• scan 掃描

• progressive 以順序方式掃描的電視機(jī)

• interlace

Mozilla專有的媒體屬性 LINK

CSS計數(shù)器

本質(zhì)上CSS計數(shù)器是由CSS維護(hù)的變量，這些變量可能根據(jù)CSS規(guī)則增加以跟蹤使用次數(shù)。這允許你根據(jù)文檔位置來調(diào)整內(nèi)容表現(xiàn)。 CSS計數(shù)器是CSS2.1中自動計數(shù)編號部分的實現(xiàn)。

計數(shù)器的值通過使用counter-reset 和 counter-increment 操作，在 content 上應(yīng)用 counter() 或 counters()函數(shù)來顯示在頁面上。

使用CSS計數(shù)器之前，必須被重置一個值，默認(rèn)是0。使用 counter() 函數(shù)來給元素增加計數(shù)器。

body {  counter-reset: section;           /* 重置計數(shù)器成0 */}h3:before {  counter-increment: section;      /* 增加計數(shù)器值 */
  content: "Section " counter(section) ": "; /* 顯示計數(shù)器 */}

計數(shù)器嵌套

使用 counters() 函數(shù)，在不同級別的嵌套計數(shù)器之間可以插入字符串。

ol {  counter-reset: section;                /* 為每個ol元素創(chuàng)建新的計數(shù)器實例 */
  list-style-type: none;
}li:before {  counter-increment: section;            /* 只增加計數(shù)器的當(dāng)前實例 */
  content: counters(section, ".") " ";   /* 為所有計數(shù)器實例增加以“.”分隔的值 */}

CSS變形

CSS transforms 屬性

有兩個主要的屬性被用來定義 CSS transforms：transform 和 transform-origin

• transform-origin:指定原點的位置。默認(rèn)值為元素的中心，可以被移動。很多變形需要用到這個屬性，比如旋轉(zhuǎn)，縮放和傾斜，他們都需要一個指定的點作為參數(shù)。

• transform:指定作用在元素上的變形。取值為空格分隔的一系列變形的列表，他們會像被組合操作請求一樣被分別執(zhí)行。

• rotate 旋轉(zhuǎn)。單位：deg，度

• skewx 傾斜

3D 特有 CSS properties

• 首先你必須設(shè)置一個透視點（perspective）。透視值決定了 3D 實現(xiàn)的方式，元素與觀察者之間的距離越遠(yuǎn)，他們就會越小。

• 通過 perspective-origin 屬性設(shè)置觀察者的位置。默認(rèn)透視值為觀察者的中心，但是這并不總是適當(dāng)?shù)摹?/p>

CSS 彈性盒

當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。對于很多?yīng)用來講，彈性盒改進(jìn)了塊模型，既不使用浮動，也不會在彈性盒容器與其內(nèi)容之間合并外邊距。

許多設(shè)計師會發(fā)現(xiàn)彈性盒容易上手。彈性盒中的子元素通過在各個方向放置就可以以彈性的尺寸適應(yīng)父元素的顯示區(qū)域。由于子元素的顯示順序和它們在代碼中 的順序是獨立的，通過使用彈性盒，定位子元素變得更加簡單，復(fù)雜的布局也能夠使用更清晰的代碼更簡單的實現(xiàn)。獨立顯示被設(shè)定成只針對可見元素，而不是基于代碼的聲明和導(dǎo)航順序。

彈性盒布局的定義中，它可以自動調(diào)整子元素的高和寬，來很好的填充任何顯示設(shè)備中的可用顯示空間，收縮內(nèi)容防止內(nèi)容溢出。

不同于塊級元素基于垂直方向布局以及行內(nèi)元素基于水平方向布局，彈性盒布局的算法是方向無關(guān)的。

雖然塊級元素布局在頁面中工作良好，但是其定義不足以支持那種需要根據(jù)用戶代理從豎直切換成水平等變化而進(jìn)行方向切換、大小調(diào)整、拉伸、收縮的引用組件。

不同于將要出現(xiàn)的網(wǎng)格布局針對目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。這兩種都是CSS工作組為了能與不同用戶代理、不同書寫模式和其他彈性需要進(jìn)行協(xié)作而做出的努力。

概念

• 彈性容器：彈性子元素的父元素。 通過設(shè)置display 屬性的值為flex 或 inline-flex將其定義為彈性容器。

• flex 值表示彈性容器為塊級。inline-flex 值表示彈性容器為原子行級元素 。

• 彈性子元素：彈性容器的每一個子元素變?yōu)橐粋€彈性子元素。彈性容器直接包含的文本變?yōu)槟涿膹椥宰釉亍?/p>

• 軸：每個彈性盒布局以兩個軸來排列。彈性子元素沿著主軸依次相互排列。側(cè)軸垂直于主軸。

• 屬性 flex-direction 定義主軸方向。

• 屬性 justify-content 定義了彈性子元素如何在當(dāng)前線上沿著主軸排列。

• 屬性 align-items 定義了彈性子元素如何在當(dāng)前線上沿著側(cè)軸排列。

• 屬性 align-self 覆蓋父元素的align-items屬性，定義了單獨的彈性子元素如何沿著側(cè)軸排列。

• 方向：彈性容器的主軸開始、主軸結(jié)束和側(cè)軸開始、側(cè)軸結(jié)束邊緣代表了彈性子元素排列的起始和結(jié)束位置。它們具體取決于由writing-mode（從左到右、從右到左等等）屬性建立的向量中的主軸和側(cè)軸位置。

• 屬性 order 將元素依次分組，并決定誰先出現(xiàn)。

• 屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡寫，用于排列彈性子元素。

• 行：彈性子元素根據(jù) flex-wrap 屬性控制的側(cè)軸方向（在這個方向上可以建立垂直的新線），既可以是一行也可以是多行排列。

• 尺寸：彈性子元素寬高可相應(yīng)地等價于主尺寸和側(cè)尺寸，它們都分別取決于彈性容器的主軸和側(cè)軸。

• min-height 和 min-width 屬性的初始值為新增關(guān)鍵字 auto。

• 屬性 flex 是 flex-basis，flex-grow 和 flex-shrink 的縮寫，代表彈性子元素的伸縮性。

包含在彈性容器內(nèi)的文本自動成為匿名的彈性子元素。然而，只包含空白的彈性子元素不會被渲染，就好像它被設(shè)定為 display:none 一樣。

相鄰的彈性子元素不會發(fā)生外邊距合并。使用 auto 的外邊距會在垂直和水平方向上帶來額外的空間，這種性質(zhì)可用于對齊或分隔臨近的彈性子元素。

為了保證彈性子元素有一個合理的默認(rèn)最小尺寸，使用 min-width:auto 與 min-height:auto。對于彈性子元素，auto屬性計算其最小的寬高不小于其內(nèi)容的尺寸，保證在渲染時其大小足夠容納內(nèi)容。

彈性盒子的對齊會進(jìn)行真正的居中，不像CSS的其他居中方法。這意味著即使彈性容器溢出，子元素仍然保持居中。有些時候這可能有問題，然而即使溢出了頁面的 上沿，或左邊沿（在從左到右的語言如英語；這個問題在從右到左的語言中發(fā)生在右邊沿，如阿拉伯文），因為你不能滾動到那里，即使那里有內(nèi)容！

說起雖然元素的顯示順序與源代碼中的順序無關(guān)，這種無關(guān)僅對顯示效果有效，不包括語音順序和基于源代碼的導(dǎo)航。即使是 order 也不影響語言和導(dǎo)航序列。因此開發(fā)者必須小心排列源代碼中的元素以免破壞文檔的可訪問性。

彈性盒子的屬性

因為彈性盒子使用一種不同的布局邏輯，一些屬性會在彈性容器上無效。

• 多列模塊 中的column-*屬性對彈性子元素?zé)o效。

• float 和 clear 對彈性子元素?zé)o效。使用 float 會導(dǎo)致 display 屬性計算為 block.

• vertical-align 對彈性子元素的對齊無效。

親自動手 Try it!

注意不是所有的瀏覽器都支持不帶前綴的屬性名。為了在大多數(shù)現(xiàn)代瀏覽器中應(yīng)用這種特性，每個屬性必須寫三次： 一次用 -moz 前綴，一次用 -webkit 前綴，一次不使用前綴。

@規(guī)則

@規(guī)則 是一個CSS 語句，以 '@' (U+0040 COMMERCIAL AT)符號開頭,后面緊跟一個標(biāo)示符, 如果它在聲明塊外面則以第一個分號';' (U+003B SEMICOLON)結(jié)束，否則以第一個聲明塊結(jié)束。

下面是一些 @規(guī)則, 由它們的標(biāo)示符指定, 每種規(guī)則都有不同的語法:

• @charset, 定義樣式表使用的字符集.

• @import, 告訴 CSS 引擎引入一個外部樣式表.

• @namespace, 告訴 CSS 引擎必須考慮XML命名空間。

• 嵌套@規(guī)則, 是嵌套語句的子集,不僅可以作為樣式表里的一個語句，也可以用在條件規(guī)則組里：

• @media, 如果滿足媒介查詢的條件則條件規(guī)則組里的規(guī)則生效。

• @page, 描述打印文檔時布局的變化.

• @font-face, 描述將下載的外部的字體。

• @keyframes, 描述 CSS 動畫的中間步驟 .

• @supports, 如果滿足給定條件則條件規(guī)則組里的規(guī)則生效。

• @document, 如果文檔樣式表滿足給定條件則條件規(guī)則組里的規(guī)則生效。(推延至 CSS Level 4 規(guī)范)

條件規(guī)則組

就像屬性值那樣,每條@規(guī)則都有不同的語法. 不過一些@規(guī)則可以歸為一類： 條件規(guī)則組. 這些語句使用相同的語法. 它們都嵌套語句，或者是規(guī)則或者是@規(guī)則。

它們都表達(dá)： 它們所指的條件 (類型不同) 總等效于 true 或者 false，如果為 true 那么它們里面的語句生效。

條件規(guī)則組由CSS Conditionals Level 3 定義:

• @media,

• @supports,

• @document. (推遲至 CSS Level 4 規(guī)范)

既然條件規(guī)則組可以嵌套語句, 那么嵌套層級不定。