邏輯操作符

1. 前言

上一節(jié)課我們已經(jīng)知道了哪些屬性可以分辨不同的屏幕設(shè)備，并且也知道了程序中的像素為何與手機(jī)中的像素不匹配的原因。

那么本小節(jié)我們將利用邏輯操作符來(lái)結(jié)合前兩節(jié)課講的那些內(nèi)容一起試水響應(yīng)式布局。

2. 邏輯操作符

那么什么是邏輯操作符呢？

邏輯操作符可用于聯(lián)合構(gòu)造復(fù)雜的媒體查詢，您還可以通過(guò)用逗號(hào)分隔多個(gè)媒體查詢，將它們組合為一個(gè)規(guī)則。

邏輯操作符分為以下四種

3. and

看完上面的表格還是有些懵對(duì)吧？來(lái)看一下語(yǔ)法你就明白到底是怎么回事了：

@media screen {
	div {
		color: black;
	}
}

為了方便大家的學(xué)習(xí)，上面寫(xiě)了一種最簡(jiǎn)單的媒體查詢規(guī)則，其中@media是固定寫(xiě)法，表示創(chuàng)建一個(gè)媒體查詢，后面跟著的是一個(gè)媒體類型，還記得前幾節(jié)我們學(xué)過(guò)的那些媒體類型嗎？通常咱們只會(huì)用到screen這種屏幕類型，然后大括號(hào)里面就可以寫(xiě)CSS語(yǔ)句了，你平時(shí)怎么寫(xiě)CSS，在大括號(hào)里就怎么寫(xiě)，也就是說(shuō)上面的那幾行代碼代表的含義是：

當(dāng)用戶使用屏幕設(shè)備瀏覽網(wǎng)頁(yè)時(shí)，頁(yè)面上的div元素內(nèi)的字體顏色變?yōu)楹谏?/p>

??不過(guò)需要注意的是，@media里面同樣需要遵守CSS權(quán)重規(guī)則，比如后面的覆蓋前面的，標(biāo)簽選擇器覆蓋不了類選擇權(quán)的樣式，所以盡量把@media寫(xiě)在整個(gè)CSS文件的末尾。

看懂最簡(jiǎn)單的語(yǔ)法后，再來(lái)加點(diǎn)難度了，比如我們希望字體顏色在手機(jī)上是藍(lán)色，但是在電腦上是綠色：

div {
	color: green;
}
@media screen and (max-width: 450px) {
	div {
		color: blue;
	}
}

假設(shè)寬度低于450px的設(shè)備就是手機(jī)設(shè)備，@media screen已經(jīng)聲明了屏幕設(shè)備，但是如果再加入一條媒體屬性(max-width: 450px)的話就需要用and這個(gè)邏輯操作符來(lái)進(jìn)行連接，有的同學(xué)可能搞不太懂為什么max-width就是小于等于的意思呢？

為了便于理解，咱們把max-width換一個(gè)說(shuō)法，換成max-salary，意思是最高工資，然后min-width換成min-salary最低工資，大家應(yīng)該都聽(tīng)說(shuō)過(guò)很多城市都有著最低工資的標(biāo)準(zhǔn)吧。

拿北京市舉例，目前的最低工資標(biāo)準(zhǔn)為2200元，換句話說(shuō)你的工資肯定是大于等于(≥)2200元的。用代碼寫(xiě)出來(lái)就變成了：min-salary: 2200，其實(shí)就等同于salary ≥ 2200。如果你理解了最低工資，那么相信你就會(huì)理解max-width和min-width了。

然后再來(lái)看代碼，咱們將默認(rèn)樣式定義在了最前面，然后把@media定義在了后面，為的就是在規(guī)則滿足咱們寫(xiě)的條件時(shí)，后面的樣式能夠覆蓋掉前面的。

and就相當(dāng)于并且的意思，@media screen and (max-width: 450px)就可以理解為：當(dāng)媒體是屏幕設(shè)備并且最大寬度為450px時(shí)執(zhí)行后面的代碼。

4. not

not這個(gè)單詞很好理解，看名字就知道是否定的意思，比如我們把剛才的需求反過(guò)來(lái)，變成字體顏色在手機(jī)上是綠色，但是在電腦上是藍(lán)色：

div {
	color: green;
}
@media not screen and (max-width: 450px) {
	div {
		color: blue;
	}
}

這么寫(xiě)看起來(lái)不是很好理解對(duì)吧，因?yàn)榉g成中文就是：不是屏幕設(shè)備和最大寬度450，看起來(lái)像是不在屏幕設(shè)備上生效一樣，而實(shí)際上not不是僅僅否定跟在它后面的那個(gè)單詞，而是否定整條語(yǔ)句，相當(dāng)于：@media not (screen and (max-width: 450px))，這回再翻譯成中文：不是(最大寬度為450的屏幕設(shè)備)，那么超過(guò)450px的寬度就已經(jīng)符合這個(gè)條件了。

5. only

only從字面意思去理解是僅僅的意思，那么如果加入它以后：

@media only screen {
	/* 省略若干代碼 */
}

翻譯成中文是：僅僅只在屏幕設(shè)備中生效。

可是咱們之前學(xué)的：

@media screen {
	/* 省略若干代碼 */
}

不也是只在屏幕設(shè)備上生效嘛，那加上這個(gè)only又有什么用呢？

實(shí)際上這是為了兼容低級(jí)瀏覽器而生的，它是為了在不支持媒體查詢的瀏覽器中隱藏樣式表，瀏覽器處理以only開(kāi)頭的關(guān)鍵詞時(shí)將會(huì)忽略only。

這又是什么意思呢？其實(shí)就是在現(xiàn)代瀏覽器中，你加不加only效果都是一樣的。
但在一些非常老舊的瀏覽器，如果你加了only，它就會(huì)直接忽略掉這條語(yǔ)句。

看到這你可能不明白了，為什么要讓老版本瀏覽器忽略掉你寫(xiě)的@media呢？

你可以簡(jiǎn)單的理解為：老版本瀏覽器有點(diǎn)近視眼，只看得到@media和緊跟在它后面的一個(gè)單詞。
在它的眼中，你寫(xiě)的@media only screen and (max-width: 450px)它只看得到@media only。
如果你還記得媒體設(shè)備的那張表格的話，你應(yīng)該知道壓根兒就沒(méi)有only這種設(shè)備，所以它就會(huì)認(rèn)為你寫(xiě)錯(cuò)了，從而忽略掉這段語(yǔ)句。

但是如果你不加only的話，那么你寫(xiě)的@media screen and (max-width: 450px)在它眼里就會(huì)看成@media screen，因?yàn)闆](méi)有看到后面的限制條件，所以你寫(xiě)在@media里面的CSS代碼會(huì)在 screen 這種設(shè)備生效，就相當(dāng)于在所有屏幕設(shè)備(手機(jī)、平板、筆記本)這段代碼都會(huì)生效。

6. 逗號(hào)

逗號(hào)其實(shí)就相當(dāng)于或者的意思，其實(shí)我發(fā)現(xiàn)有一小部分人有點(diǎn)搞不清并且和或者的區(qū)別。這在日常生活中影響可能不大，但是在程序中如果你不能理解并且和或者的話可能會(huì)導(dǎo)致你的代碼出bug。

舉個(gè)例子，如果想表示一個(gè)數(shù)(x)大于10、小于0，應(yīng)該怎么寫(xiě)？會(huì)不會(huì)寫(xiě)成這樣：
10 < x < 0
但其實(shí)這么寫(xiě)雖然能看懂，但語(yǔ)法是錯(cuò)的，想讓計(jì)算機(jī)認(rèn)識(shí)你寫(xiě)的代碼的話應(yīng)該寫(xiě)成這樣：
x < 0 (或/并) x > 10
你覺(jué)得，應(yīng)該是或還是并呢？

正確答案是或

如果是并的話，需要同時(shí)滿足這兩個(gè)條件，試問(wèn)什么數(shù)能夠既小于0又大于10 呢？

只能盡量的滿足這倆條件中的一個(gè)，這就叫作或。就相當(dāng)于一個(gè)人，你不能讓他既高又矮、既胖又瘦吧。

理解了或，那么咱們就可以用逗號(hào)來(lái)寫(xiě)代碼了：

div {
	color: green;
}
@media screen and (max-width: 450px), (min-width: 1200px) {
	div {
		color: blue;
	}
}

這回的意思是：字體在平板設(shè)備(假設(shè)平板設(shè)備寬度在450和1200之間)上是綠色，其他設(shè)備是藍(lán)色。
這就相當(dāng)于：x ≤ 450 或 x ≥ 1200，x 就是其他設(shè)備。

當(dāng)然了，其實(shí)如果把 x 當(dāng)成平板設(shè)備的話會(huì)更合理：
x ≥ 450 并 x ≤ 1200 (450 ≤ x ≤ 1200)

div {
	color: blue;
}
@media screen and (min-width: 450px) and (max-width: 1200px) {
	div {
		color: green;
	}
}

但是咱們之前之所以把平板寫(xiě)成那樣是為了給大家演示逗號(hào)的寫(xiě)法，大家可以根據(jù)自己的業(yè)務(wù)邏輯來(lái)靈活的選擇用并(and)還是或(,)。

7. 思考

為什么要用這么最大寬度(max-width)、最小寬度(min-width)累贅的寫(xiě)法呢？
直接用數(shù)學(xué)符號(hào)大于(>)小于(<)多好??！既直觀，又方便。

其實(shí)原因是因?yàn)?，?HTML 中，大于號(hào)(>)小于號(hào)(<)是標(biāo)簽的組成部分，假如你是在 <style> 標(biāo)簽內(nèi)部寫(xiě)的@media：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>media</title>
  <style>
    @media screen and (450px < width < 1200px) {
    }
  </style>
</head>
<body>
</body>
</html>

解析器可能會(huì)搞混各種標(biāo)簽，不知道你是要寫(xiě)標(biāo)簽還是只是一個(gè)小于號(hào)(還是不夠智能啊)。

不過(guò)鑒于這種語(yǔ)法既直觀又方便，CSS4打算將其納入標(biāo)準(zhǔn)，但目前還不是使用這種語(yǔ)法的時(shí)候。

8. 簡(jiǎn)寫(xiě)

有時(shí)你看別的教程或者別人的代碼可能會(huì)寫(xiě)成這樣：

@media (min-width: 450px) {
	/* 此處省略若干代碼 */
}

可以看到@media的后面并沒(méi)有寫(xiě)任何的媒體類型，而是直接寫(xiě)了一個(gè)媒體屬性，而且這樣的代碼也可以生效，那么這是為什么呢？

還記得媒體設(shè)備的那張表格嗎？

如果你不寫(xiě)設(shè)備，默認(rèn)就是 all，all 里面當(dāng)然也包含了 screen 啦，上面的代碼就相當(dāng)于：

@media all and (min-width: 450px) {
	/* 此處省略若干代碼 */
}

如果你不是很關(guān)心網(wǎng)頁(yè)在打印設(shè)備和發(fā)聲設(shè)備上會(huì)是什么樣的話，也可以省略媒體類型，反正大部分網(wǎng)頁(yè)都是要顯示在屏幕設(shè)備上的。

9. 結(jié)束語(yǔ)

看到這里，這門(mén)課就算是要結(jié)束了，如果你之前沒(méi)有過(guò)移動(dòng)端網(wǎng)頁(yè)布局的經(jīng)驗(yàn)，希望這門(mén)課可以幫到你。

不過(guò)有的同學(xué)可能會(huì)有疑惑，同樣一個(gè)布局你居然寫(xiě)出那么多種實(shí)現(xiàn)方式，記不住??！為什么不只寫(xiě)一種呢？

一方面是有些企業(yè)面試就喜歡面試者能夠提供各種各樣的不同解決方案，以此來(lái)考察面試者的技術(shù)是否足夠全面。

所以我希望這門(mén)課可以幫助大家在面試過(guò)程中能夠脫穎而出，讓面試官覺(jué)得你的技術(shù)相當(dāng)全面。

另一方面是有時(shí)候我們會(huì)遇到一些復(fù)雜樣式的需求，不是咱們課程中的這幾種很典型的布局。那么此時(shí)就需要你靈活運(yùn)用各種 CSS 技術(shù)來(lái)實(shí)現(xiàn)復(fù)雜布局，可能這個(gè)按鈕用個(gè)左浮動(dòng)、那個(gè)圖片用個(gè)絕對(duì)定位、Window10 菜單樣式用個(gè) Grid、外層容器用個(gè) Flex 等：

只有能夠靈活運(yùn)用各種各樣不同的 CSS 技術(shù)才能實(shí)現(xiàn)層出不窮的樣式需求，只掌握一種方法還是遠(yuǎn)遠(yuǎn)不夠的。

如果你實(shí)在學(xué)不動(dòng)這么多種實(shí)現(xiàn)方式，那我建議你把每個(gè)章節(jié)中的彈性盒子法(Flex)重點(diǎn)練會(huì)即可，彈性盒子在移動(dòng)端布局相當(dāng)流行，并且功能也十分強(qiáng)大。