初階前端工程師常識集(七)-and/not/only使用時機
前端工程師在設計網頁必備的Media Query,其中and/not/only的判斷條件你都分清楚了嗎?
【前文提要】RWD 網頁設計必備語法：Media Query
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。
而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」已在本系列的前篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下：
Media Query 語法可加入 ：and、or、not 和 only，做相關條件的判斷。分別介紹如下：
Media Query 語法可加入 ：and、or、not 和 only，做相關條件的判斷。分別介紹如下：
Media Query 之 and 使用方法
1. 當單一條件成立時
範例：前端工程師建議如果螢幕寬度超過 600px 以上時，就套用此份 css 設定
@media screen and (min-width:600px) {
CSS設定
}
2. 同時符合兩種條件
範例：如果螢幕寬度介於 600 px ~ 800 px 時，就套用此份 css 設定
@media screen and (min-width:600px) and (max-width:800px) {
CSS設定
}
3. 兩者條件擇一即可 (與「or」連用)
對網頁設計而言，假設兩種條件當中，符合其中一種，即可套用此份 css 設定。這種兩者條件擇一即可的「or」條件式，需配合「,」使用：
範例：如果螢幕裝置寬度小於 700px「或」是直立的話，即可套用此份 css 設定：
@media screen and (max-width: 700px), (orientation: portrait) {
CSS設定
}
Media Query 之 not 使用方法
not 是用來排除某些設備的樣式，假設你希望這個樣式只在裝置 A 有作用，裝置 B 完全沒用，就可以使用 not。
範例：「除了」螢幕裝置寬度小於 300px 「之外」，橫向印刷時都套用此份 css 設定：
@media not screen and (max-width:300px), print and (orientation: landscape){
CSS設定
}
Media Query 之 only 使用方法
only 可以指定「只有」某種裝置才能套用某些樣式，本身會寫在 media query 的字首。但目前因為使用舊版裝置的人越來越少，所以使用 only 的寫法越來越少見，反而直接採用 and 或 or 的寫法就能夠符合大多數的狀況。
下面的範例代表只有在「彩色螢幕」時才會套用 sample.css：
<link rel="stylesheet" media="only screen and (color)" href="sample.css" />
其實以上的範例也可以換成用「and」的寫法如下：
<link rel="stylesheet" media="screen and (color)" href="sample.css" />
Media Query 之 or 使用方法
or（或）就是在「多種條件當中只要符合一項就成立」的場合使用，在語法中，or 的寫法不直接寫「or」而是以逗號「,」呈現。
範例：螢幕裝置若為直立「或」是寬度小於 380px 時，字體會變成藍色的 60px。
p{
font-size:30px;
}
@media (orientation: portrait), (max-width:380px){
p{
font-size:60px;
color:blue;
}
}
更多閱讀:
初階前端工程師常識集(八)-媒體類型知多少?
想要成為前端工程師可不簡單,快來check自己會了幾項?
多重class中空格與逗號該怎麼用?聽前端工程師建議準沒錯!
達內教育開幕 培養台灣IT人才進入全球企業
是日救星!人工智慧語音辨識 APP 雅婷逐字稿,台灣國語也逃不過雅婷的掌心!
SEO優化URL網址也可以很簡單! 解讀優化通通簡單說,讓你立馬懂!!
現在公司們紛紛部屬AI人工智慧,人才卻不夠用?還不快把握機會!
