爱站程序员基地CSS3 媒體適應
- 前言
- 正文
- CSS Media Queries 是什麼？
- 使用語法
- 頁面大小
- 顯示品質
- 顏色
- 互動
- OR
- or 應用1
- or 應用2
- and 應用1
- and + or 應用2
- not 應用1
前言
大家都知道，製作網頁時常常會需要做到適配屏幕大小的需求，不能說在這部電腦上展示沒問題，換成另一部，或者說換成手機端就全部樣式都\”飛掉\”。其實這就是所謂的 RWD(Responsive Web Design) 響應式網頁。而在製作RWD響應式網頁時，最重要的一個技術就是 css3 的 media 語法。這篇將會談談我對 media-query 的了解，也幫助自己未來撰寫時，更有個方向與參考。
正文
CSS Media Queries 是什麼？
其實我們顧名思義，就可以知道 media query 的意思就是「query」(查詢)「media」(媒體)的屬性。這樣的機制本身就有附帶邏輯條件，下面一一介紹，而當查詢條件為 true 時就套用樣式，反之，若為 false，則不會套用樣式。
使用語法
@media (max-width: 500px) {/* 樣式 */.style {......}}@media print {/* 樣式 */......}
接下來更加深入 media 的世界吧!
Media 的類型
在 css level4 普及後，現在的 media 類型主要分為以下四種:
| 類型 | 描述 |
|---|---|
| all | 所有設備 |
| 印刷裝置，包含使用列印預覽產生的所有畫面 ( 例如列印為 pdf ) | |
| screen | 螢幕裝置 |
| speech | 朗讀裝置，針對可以「讀出」頁面的設備 |
- 以下為與媒體查詢無關的小常識，沒有興趣的可以直接跳過
上面提到的speech類型設備，因為本人常識不足，所以一開始真的無法想像「朗讀」的概念。原來，針對的是盲人等身障群體，雖然他們看不見，但依舊可以使用手機歐!那怎麼用呢?就是使用帶有朗讀功能的設備。其實現今很多手機都附帶有朗讀的功能了，而因為盲人的聽覺一般是我們的3~4倍靈敏，所以就靠這些speech設備，將畫面透過更高頻的頻率朗讀出來在盲人的腦中呈現視覺效果。具體原理可以更多的查詢，在這邊就介紹到這邊啦!
## Media 的 features
如果說 Media 是查尋的大方向，那麼 features 就是查尋的小方向! feature 必須用括號
()
表示，甚至可以和邏輯關鍵字結合。如果是具有 range 性質，像是高度阿，寬度之類的屬性，也能在前面加上
max-
或著
min-
的前綴。以下做了四個大致上的分類:
頁面大小
| 屬性 | 描述 |
|---|---|
| width | 屏幕寬度，支持min-width和max-width |
| height | 屏幕高度，支持min-height和max-height |
| aspect-ratio | 屏幕長寬比，支持max-aspect-ratio和min-aspect-ratio(寫法為1680/720等) |
| orientation | 屏幕旋轉方向，有portrait和landscape可選。portrait為縱向，landscape為橫向 |
顯示品質
| 屬性 | 描述 |
|---|---|
| resolution | 解析度，支持max-resolution和min-resolution |
| overflow-block | 當內容包含 block 特性並超過邊界範圍，有四個選項：none、scroll、optional-paged 和 paged。none 表示任何超過範圍都不顯示，例如看板，scroll 表示可滾動查看超出範圍，例如電腦螢幕，optional-paged 表示可手動查看超出的內容，例如簡報，paged 表示超出的內容會以分頁顯示，例如印表機 |
| overflow-inline | 當內容包含 inline 特性並超過邊界範圍，有兩個選項：none 和 scroll |
顏色
| 屬性 | 描述 |
|---|---|
| color | 輸出裝置的色彩位元數，若數值為 0 則代表黑白裝置，支持 max-color 和 min-color |
| color-index | 輸出裝置的色彩索引位元數，支持max-color-index 和 min-color-index |
| monochrome | 單色媒體功能，若數值為 0 表示「不是」單色設備 |
互動
| 屬性 | 描述 |
|---|---|
| hover | 裝置具備 hover 的能力，有兩個選項：none 和 hover |
有個大致的概念後，接下來就直接上代碼來看看吧!
Media-Queries 的例子和效果
有了上面介紹可以查尋的 features 之後，接下來就要關心怎麼做查詢了。 CSS3 提供的 Query 查詢有四種邏輯運算；分別是 or, and, not, only。除了or是用
,
表示以外，其他就是直接寫出英文就好。
OR
or
的概念大家一定都不陌生，直接來看看應用。
or 應用1
如果今天想要做到，當屏幕寬度小於600px「或」印刷時，字體要變成紅色，背景變為黃色，字體大小為100px，否則字體為紫色，背景為綠色，字體大小為30px，可以這麼做:
.block {width: 100%;height: 300px;background-color: springgreen;color: blueviolet;font-size: 30px;}@media (max-width: 600px), print {.block {background-color: yellow;color: red;font-size: 100px;}}
- 上圖為全屏的效果，下圖為縮小屏幕後的效果。
or 應用2
如果像做到，當裝置是直立「或」寬度小於 200px，就讓文字變成紅色 50px，可以這麼做:
.block {font-size: 20px;}@media (max-width: 200px), (orientation: portrait) {.block {font-size: 50px;color: red;}}
AND
and
的概念大家一定也都不陌生，直接來看看應用。
and 應用1
如果今天想做到在「螢幕」大小介於「700px~700px」之間時，字體會是紅色 50px，可以這麼做:
.block {font-size: 100px;color: aqua;}@media screen and (min-width: 700px) and (max-width: 800px) {.block {font-size: 50px;color: red;}}
-
圖一為全屏時的效果
-
圖二將屏幕寬度縮小至750px
-
圖三再將屏幕寬度縮小至500px
效果應該都一目瞭然啦!
and + or 應用2
當然，and 跟 or 也是能搭配起來一起使用的，讓我們看看下面的例子:
如果今天想做到，除了「螢幕」大小介於「200px~300px」之間時，字體會是紅色 50px，橫向印刷也會是紅色 50px 的字體，可以這麼做:
.block {font-size: 100px;color: aqua;}@media screen and (min-width: 200px) and (max-width: 300px), print and (orientation: landscape) {.block {font-size: 50px;color: red;}}
ONLY
ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首，目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。所以在這邊就不再多做介紹。
NOT
NOT 的目的在於排除一些設備，會寫在 media query 的字首。這裡要注意一下，NOT 和 ONLY 後方都必須先接 media type ( 像是 screen 或 print )，不然不會起作用。 接下來看個例子:
not 應用1
如果今天想要做到，除了屏幕寬度小於等於 300px，或印刷時為縱向，會出現紅色 50px 的字體，可以這麼做:
.block {font-size: 100px;color: aqua;}@media not screen and (max-width: 300px), print and (orientation: portrait) {.block {font-size: 50px;color: red;}}
結語
說實話，其實覺得這個媒體適應看起來不是很複雜，也挺容易理解的。但是自己其實也沒有在實際項目中應用到媒體適應的技術，以後如果有機會實際應用，也許還回來更改這篇博客。總而言之，善用 Media Queries 對於撰寫一個 RWD 網頁，似乎是絕對必要的技能呦！也希望看完這篇，能夠讓那些對媒體適應沒有了解的人有個初步清晰的概念，若有錯誤，也歡迎各位大神們給小白一些指點啦!
