CSS媒體查詢

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

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

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

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

邏輯操作符

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

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

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

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

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

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

大多數(shù)媒體屬性帶有“min-”和“max-”前綴，用于表達(dá)“小于等于”和“大于等于”。這避免了使用與HTML和XML沖突的“<”和“>”字符。如果你未向媒體屬性指定一個(gè)值，并且該特性的實(shí)際值不為零，則該表達(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）的點(diǎn)數(shù)來(lái)表示。

• tv 電視媒體

• handheld 手持設(shè)備

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

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

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

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

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

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

• 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計(jì)數(shù)器

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

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

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

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

計(jì)數(shù)器嵌套

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

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

CSS變形

CSS transforms 屬性

有兩個(gè)主要的屬性被用來(lái)定義 CSS transforms：transform 和 transform-origin

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

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

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

• skewx 傾斜

3D 特有 CSS properties

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

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

CSS 彈性盒

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

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

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

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

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

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

概念

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

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

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

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

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

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

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

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

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

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

• 屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)，用于排列彈性子元素。

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

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

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

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

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

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

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

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

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

彈性盒子的屬性

因?yàn)閺椥院凶邮褂靡环N不同的布局邏輯，一些屬性會(huì)在彈性容器上無(wú)效。

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

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

• vertical-align 對(duì)彈性子元素的對(duì)齊無(wú)效。

親自動(dòng)手 Try it!

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

@規(guī)則

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

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

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

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

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

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

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

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

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

• @keyframes, 描述 CSS 動(dòng)畫(huà)的中間步驟 .

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

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

條件規(guī)則組

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

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

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

• @media,

• @supports,

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

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