手撕紅黑樹 ·邏輯操作符
1. 前言
上一節(jié)課我們已經(jīng)知道了哪些屬性可以分辨不同的屏幕設備，并且也知道了程序中的像素為何與手機中的像素不匹配的原因。
那么本小節(jié)我們將利用邏輯操作符來結合前兩節(jié)課講的那些內(nèi)容一起試水響應式布局。
2. 邏輯操作符
那么什么是邏輯操作符呢？
邏輯操作符可用于聯(lián)合構造復雜的媒體查詢，您還可以通過用逗號分隔多個媒體查詢，將它們組合為一個規(guī)則。
邏輯操作符分為以下四種
| 含義 | |
|---|---|
| and | 用于將多個媒體查詢規(guī)則組合成單條媒體查詢，當每個查詢規(guī)則都為真時則該條媒體查詢?yōu)檎?，它還用于將媒體功能與媒體類型結合在一起。 |
| not | 用于否定媒體查詢，如果不滿足這個條件則返回true，否則返回false。 如果出現(xiàn)在以逗號分隔的查詢列表中，它將僅否定應用了該查詢的特定查詢。 如果使用not運算符，則還必須指定媒體類型 |
| only | 僅在整個查詢匹配時才用于應用樣式，并且對于防止較早的瀏覽器應用所選樣式很有用。 當不使用only時，舊版本的瀏覽器會將screen and (max-width: 500px)簡單地解釋為screen，忽略查詢的其余部分，并將其樣式應用于所有屏幕。 如果使用only運算符，則還必須指定媒體類型。 |
| , (逗號) | 逗號用于將多個媒體查詢合并為一個規(guī)則。 逗號分隔列表中的每個查詢都與其他查詢分開處理。 因此，如果列表中的任何查詢?yōu)閠rue，則整個media語句均返回true。 換句話說，列表的行為類似于邏輯或or運算符。 |
3. and
看完上面的表格還是有些懵對吧？來看一下語法你就明白到底是怎么回事了：
@media screen {
div {
color: black;
}
}
為了方便大家的學習，上面寫了一種最簡單的媒體查詢規(guī)則，其中@media是固定寫法，表示創(chuàng)建一個媒體查詢，后面跟著的是一個媒體類型，還記得前幾節(jié)我們學過的那些媒體類型嗎？通常咱們只會用到screen這種屏幕類型，然后大括號里面就可以寫CSS語句了，你平時怎么寫CSS，在大括號里就怎么寫，也就是說上面的那幾行代碼代表的含義是：
當用戶使用屏幕設備瀏覽網(wǎng)頁時，頁面上的div元素內(nèi)的字體顏色變?yōu)楹谏?/p>
??不過需要注意的是，@media里面同樣需要遵守CSS權重規(guī)則，比如后面的覆蓋前面的，標簽選擇器覆蓋不了類選擇權的樣式，所以盡量把@media寫在整個CSS文件的末尾。
看懂最簡單的語法后，再來加點難度了，比如我們希望字體顏色在手機上是藍色，但是在電腦上是綠色：
div {
color: green;
}
@media screen and (max-width: 450px) {
div {
color: blue;
}
}
假設寬度低于450px的設備就是手機設備，@media screen已經(jīng)聲明了屏幕設備，但是如果再加入一條媒體屬性(max-width: 450px)的話就需要用and這個邏輯操作符來進行連接，有的同學可能搞不太懂為什么max-width就是小于等于的意思呢？
為了便于理解，咱們把max-width換一個說法，換成max-salary，意思是最高工資，然后min-width換成min-salary最低工資，大家應該都聽說過很多城市都有著最低工資的標準吧。
拿北京市舉例，目前的最低工資標準為2200元，換句話說你的工資肯定是大于等于(≥)2200元的。用代碼寫出來就變成了：min-salary: 2200，其實就等同于salary ≥ 2200。如果你理解了最低工資，那么相信你就會理解max-width和min-width了。
然后再來看代碼，咱們將默認樣式定義在了最前面，然后把@media定義在了后面，為的就是在規(guī)則滿足咱們寫的條件時，后面的樣式能夠覆蓋掉前面的。
and就相當于并且的意思，@media screen and (max-width: 450px)就可以理解為：當媒體是屏幕設備并且最大寬度為450px時執(zhí)行后面的代碼。
4. not
not這個單詞很好理解，看名字就知道是否定的意思，比如我們把剛才的需求反過來，變成字體顏色在手機上是綠色，但是在電腦上是藍色：
div {
color: green;
}
@media not screen and (max-width: 450px) {
div {
color: blue;
}
}
這么寫看起來不是很好理解對吧，因為翻譯成中文就是：不是屏幕設備和最大寬度450，看起來像是不在屏幕設備上生效一樣，而實際上not不是僅僅否定跟在它后面的那個單詞，而是否定整條語句，相當于：@media not (screen and (max-width: 450px))，這回再翻譯成中文：不是(最大寬度為450的屏幕設備)，那么超過450px的寬度就已經(jīng)符合這個條件了。
5. only
only從字面意思去理解是僅僅的意思，那么如果加入它以后：
@media only screen {
/* 省略若干代碼 */
}
翻譯成中文是：僅僅只在屏幕設備中生效。
可是咱們之前學的：
@media screen {
/* 省略若干代碼 */
}
不也是只在屏幕設備上生效嘛，那加上這個only又有什么用呢？
實際上這是為了兼容低級瀏覽器而生的，它是為了在不支持媒體查詢的瀏覽器中隱藏樣式表，瀏覽器處理以only開頭的關鍵詞時將會忽略only。
這又是什么意思呢？其實就是在現(xiàn)代瀏覽器中，你加不加only效果都是一樣的。
但在一些非常老舊的瀏覽器，如果你加了only，它就會直接忽略掉這條語句。
看到這你可能不明白了，為什么要讓老版本瀏覽器忽略掉你寫的@media呢？
你可以簡單的理解為：老版本瀏覽器有點近視眼，只看得到@media和緊跟在它后面的一個單詞。
在它的眼中，你寫的@media only screen and (max-width: 450px)它只看得到@media only。
如果你還記得媒體設備的那張表格的話，你應該知道壓根兒就沒有only這種設備，所以它就會認為你寫錯了，從而忽略掉這段語句。
但是如果你不加only的話，那么你寫的@media screen and (max-width: 450px)在它眼里就會看成@media screen，因為沒有看到后面的限制條件，所以你寫在@media里面的CSS代碼會在 screen 這種設備生效，就相當于在所有屏幕設備(手機、平板、筆記本)這段代碼都會生效。
6. 逗號
逗號其實就相當于或者的意思，其實我發(fā)現(xiàn)有一小部分人有點搞不清并且和或者的區(qū)別。這在日常生活中影響可能不大，但是在程序中如果你不能理解并且和或者的話可能會導致你的代碼出bug。
舉個例子，如果想表示一個數(shù)(x)大于10、小于0，應該怎么寫？會不會寫成這樣：
10 < x < 0
但其實這么寫雖然能看懂，但語法是錯的，想讓計算機認識你寫的代碼的話應該寫成這樣：
x < 0 (或/并) x > 10
你覺得，應該是或還是并呢？
正確答案是或
如果是并的話，需要同時滿足這兩個條件，試問什么數(shù)能夠既小于0又大于10 呢？
只能盡量的滿足這倆條件中的一個，這就叫作或。就相當于一個人，你不能讓他既高又矮、既胖又瘦吧。
理解了或，那么咱們就可以用逗號來寫代碼了：
div {
color: green;
}
@media screen and (max-width: 450px), (min-width: 1200px) {
div {
color: blue;
}
}
這回的意思是：字體在平板設備(假設平板設備寬度在450和1200之間)上是綠色，其他設備是藍色。
這就相當于：x ≤ 450 或 x ≥ 1200，x 就是其他設備。
當然了，其實如果把 x 當成平板設備的話會更合理：
x ≥ 450 并 x ≤ 1200 (450 ≤ x ≤ 1200)
div {
color: blue;
}
@media screen and (min-width: 450px) and (max-width: 1200px) {
div {
color: green;
}
}
但是咱們之前之所以把平板寫成那樣是為了給大家演示逗號的寫法，大家可以根據(jù)自己的業(yè)務邏輯來靈活的選擇用并(and)還是或(,)。
7. 思考
為什么要用這么最大寬度(max-width)、最小寬度(min-width)累贅的寫法呢？
直接用數(shù)學符號大于(>)小于(<)多好啊！既直觀，又方便。
其實原因是因為，在 HTML 中，大于號(>)小于號(<)是標簽的組成部分，假如你是在 <style> 標簽內(nèi)部寫的@media：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>media</title>
<style>
@media screen and (450px < width < 1200px) {
}
</style>
</head>
<body>
</body>
</html>
解析器可能會搞混各種標簽，不知道你是要寫標簽還是只是一個小于號(還是不夠智能啊)。
不過鑒于這種語法既直觀又方便，CSS4打算將其納入標準，但目前還不是使用這種語法的時候。
8. 簡寫
有時你看別的教程或者別人的代碼可能會寫成這樣：
@media (min-width: 450px) {
/* 此處省略若干代碼 */
}
可以看到@media的后面并沒有寫任何的媒體類型，而是直接寫了一個媒體屬性，而且這樣的代碼也可以生效，那么這是為什么呢？
還記得媒體設備的那張表格嗎？
| 設備 | 中文含義 |
|---|---|
| all | 所有設備 |
| 用于打印機和打印預覽 | |
| screen | 用于電腦屏幕、平板電腦、智能手機等 |
| speech | 應用于屏幕閱讀器等發(fā)聲設備 |
如果你不寫設備，默認就是 all，all 里面當然也包含了 screen 啦，上面的代碼就相當于：
@media all and (min-width: 450px) {
/* 此處省略若干代碼 */
}
如果你不是很關心網(wǎng)頁在打印設備和發(fā)聲設備上會是什么樣的話，也可以省略媒體類型，反正大部分網(wǎng)頁都是要顯示在屏幕設備上的。
9. 結束語
看到這里，這門課就算是要結束了，如果你之前沒有過移動端網(wǎng)頁布局的經(jīng)驗，希望這門課可以幫到你。
不過有的同學可能會有疑惑，同樣一個布局你居然寫出那么多種實現(xiàn)方式，記不住??！為什么不只寫一種呢？
一方面是有些企業(yè)面試就喜歡面試者能夠提供各種各樣的不同解決方案，以此來考察面試者的技術是否足夠全面。
所以我希望這門課可以幫助大家在面試過程中能夠脫穎而出，讓面試官覺得你的技術相當全面。
另一方面是有時候我們會遇到一些復雜樣式的需求，不是咱們課程中的這幾種很典型的布局。那么此時就需要你靈活運用各種 CSS 技術來實現(xiàn)復雜布局，可能這個按鈕用個左浮動、那個圖片用個絕對定位、Window10 菜單樣式用個 Grid、外層容器用個 Flex 等：
只有能夠靈活運用各種各樣不同的 CSS 技術才能實現(xiàn)層出不窮的樣式需求，只掌握一種方法還是遠遠不夠的。
如果你實在學不動這么多種實現(xiàn)方式，那我建議你把每個章節(jié)中的彈性盒子法(Flex)重點練會即可，彈性盒子在移動端布局相當流行，并且功能也十分強大。
2025 imooc.com All Rights Reserved |