標籤: AWD

中國IT教育領導品牌　達內教育集團第一家海外授權中心

前端工程師RWD小課:什麼是媒體特性(上)

前端工程師不可不知的網頁小幫手—-媒體特性!!把握好訣竅就事半功倍~

【前文提要】RWD 網頁設計必備語法：Media Query
前端工程師或網頁設計師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。參考文章：如何在RWD網頁中套用Media Query語法而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」與「and/not/only判斷條件」已在本系列的前篇文章做說明，此篇就針對媒體特徵 (Media Feature) 的視窗或頁面尺寸類 (Viewport/Page Dimensions) 與顯示品質 (Display Quality) 屬性做說明。而至於「顏色類」和「互動類」的屬性則於此篇文章做說明。

Media Features 媒體特性 – 視窗與頁面尺寸 (Viewport/Page Dimensions)

媒體特徵	說明
device-height	裝置螢幕高度
max-device-height	裝置螢幕高度小於或等於…
min-device-height	裝置螢幕高度大於或等於…
device-width	裝置螢幕寬度
max-device-width	裝置螢幕寬度小於或等於…
min-device-width	裝置螢幕寬度大於或等於…
height	視窗高度
max-height	視窗高度小於或等於…
min-height	視窗高度大於或等於…
width	視窗寬度
max-width	視窗寬度小於或等於…
min-width	視窗寬度大於或等於…
orientation	螢幕旋轉方向，可設定 portrait ( 直向 ) 與 landscape ( 橫向 )
aspect-ratio	螢幕長寬比例，寫法格式為「長/寬」，如 1680/720。可寫成 max-aspect-ratio (最大長寬比) 或 min-aspect-ratio (最小長寬比)

Media Features 媒體特性 – 顯示品質 (Display Quality)

媒體特徵	說明
resolution	解析度，單位為 dpi、ppx 等字首加「max-」為 max-resolution (最大解析度) 字首加「min-」為 min-resolution (最小解析度)
scan	顯示器掃描線的方式，有兩個選項：interlace 和 progressive。其值等同於 1080i 和 1080p 的字尾英文意思： interlace 為奇數偶數掃描線交錯的方式，progressive 為漸進式掃描，是現在大多數電視採用的方式 )
update	媒體更新，有三個選項：none、slow 和 fast none 表示無法更新的裝置，如印出來的文件 slow 表示更新速度慢的顯示裝置，如亞馬遜 Kindle 等裝置 fast 表示更新速度快的裝置，如電腦螢幕
overflow-block 區塊溢出	當區塊元素 ( 如 <div> 、<p>、<h1>-<h6>、<table> 等 ) 超過邊界範圍時用，有四個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分 overflow-block: paged：超出的內容會顯示在下一頁 overflow-block: optional-paged：可滾動查看超出範圍，且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。
overflow-inline: scroll 行內溢出	當行內元素 ( 如 <br> 、<img>、<strong> 等) 超過邊界範圍時用，有二個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分

其實 CSS Media Query 對於許多前端工程師或網頁設計師來說並不複雜，大多數的狀況其實都只是在應付 RWD響應式網頁需要注意螢幕尺寸的特性。也就是說，只要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features (就是本篇提到的這些屬性等) 就能解決各種裝置的狀況。至於其他的屬性 (請參考此篇) 多是應付特殊的狀況，如單色的螢幕、超過範圍的區塊等等。總而言之，對於撰寫一個 RWD響應式網頁，善用 Media Query 是必備的技能！

本篇為「前端工程師的基礎RWD教學」系列文章第六篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

其他閱讀

前端工程師RWD小課:做好流動圖片網頁不卡卡

前端工程師RWD小課:如何判斷and/not/only?

前端工程師RWD小課:什麼是媒體特性(下)

中國IT教育領導品牌　達內教育集團第一家海外授權中心

前端工程師必學RWD 8 :什麼是流動圖片?

前端工程師若是想把網頁變得更完美流暢,那一定不能不知道甚麼是流動圖片!!


(目錄) 前端工程師必備的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網頁。這些 RWD網頁中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。

在網頁設計的RWD網頁中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下：

#banner {
  max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
  height: auto;  /*高度設為 auto  好讓圖片可以等比例縮放*/
}

上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。

相信大家已經看到夠多美美的滿版圖片的網頁了吧? 這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小，若有指定為 cover 的話，則可使背景填滿容器。下例為背景圖片的 Fluid Image 設定為填滿容器的語法：

#banner {
  background-size: cover; 
}

下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。

本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下:

(目錄)

其他閱讀

前端工程師必學RWD 6 :媒體特性概說(上)

前端工程師必學RWD 7 :媒體特性概說(下)

前端工程師必學RWD 8 :什麼是流動圖片?

不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!

想學世界五大熱門程式語言,那你一定不能錯過Java課程!!

程式課程選達內，美上市IT課程教育集團

美國NASDAQ上市公司、外商IT教育培訓企業

前端工程師RWD小課:如何判斷and/not/only?

今天的前端工程師RWD小課要來教大家如何判斷and/not/only!! 快收!!

而 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小課:Media Type有哪些?

前端工程師RWD小課:簡單介紹RWD!!

前端工程師RWD小課:流動布局的技術組合

稱霸排行榜的五大程式語言你都瞭嗎? 除了熱門的Java課程,你還可選….

前端工程師必學RWD 5 :and/not/only判斷條件

前端工程師必學RWD 7 :媒體特性概說(下)

前端工程師一定要知道的媒體特性下篇來啦!!今天要教大家定義顏色和互動的表格~

本篇接續前篇介紹 Media Features 媒體特性的顏色 (Color) 與互動 (Interaction):

用來定義顏色 (Color) 的常見 Media Features 媒體特性一覽表

媒體特徵	說明
color	輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0
color-index	輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0
monochrome	輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0
color-gamut 輸出裝置色域	輸出裝置色域，有三個選項介紹如下： srgb：sRGB 的意思是「標準 RGB」，為最早期的色域標準之一，絕大多數的顯示器都支援 sRGB。 p3 ：色域比 sRGB 更廣且包含 sRGB，是一種應用於數位電影的色域，是一套以人類視覺體驗為主導的色域標準。但是現在它也不是色域最廣的標準。 rec2020：色域比 p3 與 sRGB 更廣，且包含 p3 與 sRGB 的色域。rec2020 是 ITU 國際電信聯盟專門為現在的 HDTV 以及未來 UHD 電視（4K、8K）制定的標準

用來定義互動 ( Interaction ) 的常見 Media Features 媒體特性一覽表

媒體特徵	說明
pointer、any-pointer 游標準確度	游標裝置 ( 例如滑鼠 ) 的準確性，有三個選項如下 none：表示沒有游標裝置 coarse ：表示精準度較差的游標裝置，例如觸控螢幕
hover、any-hover hover 反應	簡單來說，hover 是在控制當滑鼠移至某元件時，某元件該如何反應。例如當滑鼠經過超連結文字時，該文字就會有變色的反應。有二個選項如下 none：表示沒有 hover hover：表示有 hover 反應

本篇為「前端工程師的基礎RWD教學」系列文章第七篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

其他閱讀

前端工程師必學RWD 6 :媒體特性概說(上)

前端工程師必學RWD 8 :什麼是流動圖片?

不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!

想學世界五大熱門程式語言,那你一定不能錯過Java課程!!

程式課程選達內，美上市IT課程教育集團

美國NASDAQ上市公司、外商IT教育培訓企業

前端工程師必學RWD 6 :媒體特性概說(上)

前端工程師想把網頁做得漂亮又流暢嗎?那一定要好好掌握媒體特性!!

Media Features 媒體特性 – 視窗與頁面尺寸 (Viewport/Page Dimensions)

媒體特徵	說明
device-height	裝置螢幕高度
max-device-height	裝置螢幕高度小於或等於…
min-device-height	裝置螢幕高度大於或等於…
device-width	裝置螢幕寬度
max-device-width	裝置螢幕寬度小於或等於…
min-device-width	裝置螢幕寬度大於或等於…
height	視窗高度
max-height	視窗高度小於或等於…
min-height	視窗高度大於或等於…
width	視窗寬度
max-width	視窗寬度小於或等於…
min-width	視窗寬度大於或等於…
orientation	螢幕旋轉方向，可設定 portrait ( 直向 ) 與 landscape ( 橫向 )
aspect-ratio	螢幕長寬比例，寫法格式為「長/寬」，如 1680/720。可寫成 max-aspect-ratio (最大長寬比) 或 min-aspect-ratio (最小長寬比)

Media Features 媒體特性 – 顯示品質 (Display Quality)

媒體特徵	說明
resolution	解析度，單位為 dpi、ppx 等字首加「max-」為 max-resolution (最大解析度) 字首加「min-」為 min-resolution (最小解析度)
scan	顯示器掃描線的方式，有兩個選項：interlace 和 progressive。其值等同於 1080i 和 1080p 的字尾英文意思： interlace 為奇數偶數掃描線交錯的方式，progressive 為漸進式掃描，是現在大多數電視採用的方式 )
update	媒體更新，有三個選項：none、slow 和 fast none 表示無法更新的裝置，如印出來的文件 slow 表示更新速度慢的顯示裝置，如亞馬遜 Kindle 等裝置 fast 表示更新速度快的裝置，如電腦螢幕
overflow-block 區塊溢出	當區塊元素 ( 如 <div> 、<p>、<h1>-<h6>、<table> 等 ) 超過邊界範圍時用，有四個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分 overflow-block: paged：超出的內容會顯示在下一頁 overflow-block: optional-paged：可滾動查看超出範圍，且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。
overflow-inline: scroll 行內溢出	當行內元素 ( 如 <br> 、<img>、<strong> 等) 超過邊界範圍時用，有二個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分

本篇為「前端工程師的基礎RWD教學」系列文章第六篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

其他閱讀

前端工程師必學RWD 5 :and/not/only判斷條件

前端工程師必學RWD 7 :媒體特性概說(下)

前端工程師必學RWD 8 :什麼是流動圖片?

不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!

想學世界五大熱門程式語言,那你一定不能錯過Java課程!!

程式課程選達內，美上市IT課程教育集團

美國NASDAQ上市公司、外商IT教育培訓企業

前端工程師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

#banner {
  max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
  height: auto;  /*高度設為 auto  好讓圖片可以等比例縮放*/
}

上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。

#banner {
  background-size: cover; 
}

下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。

全系列目錄如下:

(目錄)

其他閱讀

前端工程師RWD小課:如何判斷and/not/only?

前端工程師RWD小課:什麼是媒體特性(上)

前端工程師RWD小課:什麼是媒體特性(下)