CSS3 媒體適應

• 前言
• 正文
• CSS Media Queries 是什麼？
• 使用語法

Media 的類型

• 頁面大小
• 顯示品質
• 顏色
• 互動

Media-Queries 的例子和效果

• OR
• or 應用1
• or 應用2

AND

• and 應用1
• and + or 應用2

ONLY

NOT

• 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	所有設備
print	印刷裝置，包含使用列印預覽產生的所有畫面 ( 例如列印為 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 網頁，似乎是絕對必要的技能呦！也希望看完這篇，能夠讓那些對媒體適應沒有了解的人有個初步清晰的概念，若有錯誤，也歡迎各位大神們給小白一些指點啦!