今天的前端工程師RWD教學要來跟大家談談Media Query裡的and/not/only各是什麼意思~ 不要錯過嘍!!
【前文提要】RWD 網頁設計必備語法：Media Query 而 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 使用方法
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;
}
}
本篇為「前端工程師的基礎RWD教學」系列文章第五篇，全系列文章如下:
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
其他閱讀
前端工程師RWD教學:Media Type種類表格
前端工程師RWD教學:何謂RWD?
前端工程師RWD教學:流動布局原來是由這兩項技術組成的!!
著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!
想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
美國NASDAQ上市公司、外商IT教育培訓企業
