Bootstrap 4 的 Grid 應用介紹

日期：2017.08.14
留言數：0
標籤：bootstrap CSS3 Flexbox Grid System RWD 教學

Bootstrap 4 從去年釋出 BETA 版後，到現在幾乎所有功能都齊全了，官方也釋出了詳細的 BETA 網站與文件，感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀

為什麼 Bootstrap 4 的出現如此引人注目呢？因為之前 V2 到 V3 只是「增強」，但 V3 到 V4 卻是「改革」，Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新，所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例，我自己比較常用 Bootstrap 的 Grid System (網格系統)，因此這次的筆記也會以 Grid System 為主，介紹一下 V3 與 V4 之間的差異。

1. Bootstrap 4 的一個重大改變，就是使用了 CSS 的 Flexbox 重新排版定義 Grid，關於 Flexbox 的介紹，可以參考我之前的文章：CSS Flexbox 介紹與解析。
2. 承上，因為 IE9 並不支援 Flexbox，所以如有需要使用 IE9，就請繼續使用 Bootstrap V3 版本。

斷點(Breakpoint)的調整

Bootstrap 3 的斷點與前綴詞

	Extra Small	Small	Medium	Large
斷點範圍	0 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-xs	col-sm	col-md	col-lg

Bootstrap 4 修改如下

	Extra Small	Small	Medium	Large	Extra Large
斷點範圍	0 ~ 575 px	576 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-	col-sm	col-md	col-lg	col-xl

☞ 差異

新增了一個576px作為最小的斷點
Extra Small 由col-xs-*改為col-*
新增了 Extra Large，前綴詞為col-xl-*

可以自動的平均分配欄寬

以往使用 Bootstrap 3 時，每一個col-md-*後面一定要帶數字，數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox，所以不輸入數字 = 平均分配欄寬。

以下來個簡易範例：

▼ Bootstrap 3
需要輸入「數字」才能知道寬度

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

▼ Bootstrap 4
不需輸入數字就能根據 col 的數量分配欄寬

<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>

▼ Bootstrap 4
也可以只設定其中一個欄寬，剩下的平均分配

<div class="row">
  <div class="col-md"></div>
  <div class="col-md-5"></div>
  <div class="col-md"></div>
</div>

☞ 範例

See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.

動態調整欄寬

除了能平均分配欄寬外，還能根據文字寬度，動態的調整欄寬。這是 Bootstrap 4 的新語法，使用的是col-md-auto。

<div class="col-md">A</div>
  <div class="col-md-auto">Hello World / Nice to Meet you</div>
<div class="col-md">C</div>

也可以把我們之前熟悉的各種斷點給加進來，做出更多的螢幕寬度變化：

<div class="row">
  <div class="col col-lg-2">
    A
  </div>
  <div class="col-12 col-lg-auto">
    Hello World
  </div>
  <div class="col col-lg-5">
    C
  </div>
</div>

☞ 範例

See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.

讓 Column 換行

安插一個空的 DIV，CLASS 名稱為w-100，就可以讓 Column 強制換行唷～

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
  <div class="col">E</div>
  <div class="w-100"></div>
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

☞ 範例

See the Pen prWRaX by MUKi (@mukiwu) on CodePen.

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

align-items-start：置頂
align-items-center：置中
align-items-end：置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

<div class="row align-items-start">
  <div class="col">AA</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

<div class="row align-items-center">
  <div class="col">A</div>
  <div class="col">BB</div>
  <div class="col">C</div>
</div>
<div class="row align-items-end">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">CC</div>
</div>

▼ 另外我們也可以改用align-self-*在col裡面單獨針對 Column 做對齊的動作

align-self-start：置頂
align-self-center：置中
align-self-end：置底

<div class="row">
  <div class="col align-self-start">A</div>
  <div class="col align-self-center">B</div>
  <div class="col align-self-end">C</div>
</div>

透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

☞ 範例

See the Pen NvadMo by MUKi (@mukiwu) on CodePen.

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

justify-content-start：靠左對齊
justify-content-center：置中對齊
justify-content-end：靠右對齊
justify-content-around：分散對齊(含左右)
justify-content-between：分散對齊(不含左右)

<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

☞ 範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.

移除 gutter

Bootstrap 的row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了no-gutters這個 class，可以讓我們移除 gutter

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹(~~絕對不是因為懶~~)

Column 排序

以前如果要將排序會用pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

flex-unordered：不排序
flex-first：第一個
flex-last：最後一個

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>

☞ 範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞ 補充

offset也一樣將前綴往後放。

Bootstrap 4 的 Grid 介紹就到此告一段落囉，有一些功能我沒有特別提到，例如 Wrapping、Nested，是因為跟 V3 相比沒有太大的改變，就不額外寫出來了。

Bootstrap 的功能非常強大，是一個堪稱超完整的 Framework，但我自己只有使用它的 Grid System，所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程，也會以 V4 為主要規劃設計新的範例與課程，也請大家敬請期待 😀

那麼對文章有任何不懂的地方，也歡迎留言告訴我唷，謝謝 ^_^

CSS Flexbox 介紹與解析

日期：2016.06.27
留言數：0
標籤：css 語法 CSS3 flex RWD 原創教學觀念

老實說我到現在都還沒開始用 flex 做網站，最大的原因就是 IE 相容問題，不過這也不能當作不學習的原因，畢竟這行就是要不斷的學習新知識😂，而且剛好在某次前端課程中有同學問我能否介紹 flex，所以想想，乾脆就寫一篇文章吧！不僅是幫自己做個筆記，以後也可以當作課堂上的補充講義～。

▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox

簡單來說，Flexbox 是一種 CSS 的排版語法，就跟我們以往用的 position, float, display…一樣，只是 Flexbox 是 CSS3 的新語法，所以才有瀏覽器相容的問題。

Flexbox 相關屬性與值

我覺得 Flexbox 較難上手的原因，就是他的屬性跟值太多了，不像 float 很單純的只有 left, right, none 這三種，但當然好處就是彈性非常大，幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。

在這邊也參考了 W3C 的網站，列出所有 flexbox 的屬性跟值給大家參考，至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔！

屬性	屬性介紹	可用的值	預設值	影響
flex-flow	將 flex-direction 以及 flex-wrap 合併寫在一起	flex-direction ｜flex-wrap		flex containers
flex-direction	排列方向	row	row	flex containers
		row-reverse
		column
		column-reverse
flex-wrap	換行	nowrap	nowrap	flex containers
		wrap
		wrap-resverse
order	調整元素排列的順序	<整數>	0
flex	將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起	flex-grow｜flex-shrink｜flex-basis		flex items
flex-grow		<數字>	0	flex items
flex-shrink		<數字>	1	flex items
flex-basis		<寬度>	auto	flex items
justify-content	水平對齊設定	flex-start	flex-start	flex containers
		flex-end
		center
		space-between
		space-around
align-items	垂直對齊 (元素單行排列)	flex-start	stretch	flex containers
		flex-end
		center
		baseline
		stretch
align-self		flex-start	auto	flex items
		flex-end
		center
		baseline
		strech
align-content	垂直對齊 (元素排列超過兩行以上)	flex-start	stretch	多行 flex containers
		flex-end
		center
		space-between
		space-around
		stretch

常用的 Flexbox 排版語法

要使用 flex 前，必須先在該容器指定：

div {
  display: flex;
}

而特別有趣的是，就連行內元素都可以用 flex 唷：

div {
  display: inline-flex;
}

接下來，我們用一小段 HTML 語法表示 Flexbox 的架構：

<div class="flex-container">
  <div class="flex-item">內容 A</div>
  <div class="flex-item">內容 B</div>
  <div class="flex-item">內容 C</div>
  <div class="flex-item">內容 D</div>
</div>

承上，這個很常見的巢狀排版恰恰能表達flex的兩大主角：flex-container以及flex-item，前者表示的是一個巨大的容器(container)，後者則是各個獨立的項目(item)。

flex的屬性，有的會影響的是容器，有的則影響項目。如果不太清楚屬性影響的是哪一塊，可以回到前一頁看表格的「影響」欄位做參考。

基本的 Flexbox 排版

flex-direction

我們先介紹最簡單的左右版面，以往直接用float: left解決，那麼換成flex的話可以這麼寫：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Flexbox 是 Box Model 的一種表現形式，以前我們用display去改變每個元素的 Box Model，在此也是一樣，我們要在flex-container先設定display: flex，確保自己以及裡面的子元素 Box Model 都會轉成flex的設定。
flex-direction表示 flex 的水平排列方向，第一頁的 Flexbox 屬性表上有提到，flex-direction必須放在 flex container 的父層架構下，而不是 flex item 這個子層，所以這句話寫在.flex-container裡，如果你把它放在.flex-item會發現沒作用。(再次提醒：對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧！

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面，用到的row跟column，一個是水平排列、一個是垂直排列；而reverse是反轉的意思，稍微對照一下上面的範例應該不難了解唷！

flex-wrap

接下來再加一個新的語法flex-wrap，這個同樣要放在.flex-container裡面，wrap是斷行的意思，可以利用這個語法決定是否要換行。

設定nowrap表示即使有多少區塊，也必須都放在同一行內(會自動分配寬度)。設定wrap則是會依照內容或寬度自動換行。

See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.

flex是三個屬性的合併縮寫：flex-grow, flex-shrink, flex-basis，可以看作是 FLexbox 的核心設定。註：flex 的這些屬性影響的是 flex items。

flex-grow

我們都知道，區塊預設的寬度是元素內容的寬度，如下圖所示 ▼

如果想要調整寬度，一般可以用width設定，但也能用flex-grow唷！flex-grow的預設值為 0，表示寬度就是元素內容的寬。而從 1開始，數字愈大，占的寬度比例也會愈大。

.grow1 { flex-grow: 2;}
.grow2 { flex-grow: 2;}
.grow3 { flex-grow: 1;}
.grow4 { flex-grow: 0;}

範例圖如下所示 ▼

flex-shrink

flex-shrink跟flex-grow相反，是表示當父元素寬度空間不足時，子元素壓縮的比例。預設值為 1，但設為 0 同樣表示不壓縮，數字愈大，被壓縮的幅度就愈大。

.shrink1 { width: 50%; flex-shrink: 2;}
.shrink2 { width: 50%; flex-shrink: 2;}
.shrink3 { width: 50%; flex-shrink: 1;}
.shrink4 { width: 50%; flex-shrink: 0;}

範例圖如下所示 ▼

flex-basis

可以在flex-basis設定寬度或高度，設定好後會自動分配該區塊的寬度或高度。

.basis1 { flex-basis: 200px;}
.basis2 { flex-basis: 600px;}

假設父元素寬度是500px，我在裡面設了兩個子元素分別為200px以及600px，他會依照比例分別給予子元素寬度，如圖所示 ▼

以上這三個語法因為有比較多的彈性，所以可以用在製作 RWD 網站上。

flex

最後，再次提到flex這個語法，是用來合併以上三個屬性，規格為：

flex: flex-grow｜flex-shrink｜flex-basis

flex 還有兩個更簡短的縮寫：

/* 以下兩個相同 */
.flex {
  flex: auto
  flex: 1 1 auto;
}

/* 以下兩個相同 */
.flex {
  flex: none;
  flex: 0 0 auto;
}

以上關於flex的範例程式碼，請參考：http://codepen.io/mukiwu/pen/qNRJPv

Flexbox 還有一些屬性沒有提到，因為~~我有點累了~~，所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法，所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中，超級適合用flex解的喔！在這邊我們會用到兩個屬性：

justify-content
align-items

而這兩個屬性我前面通通都、沒、說(炸)，但真的很簡單，所以直接上程式碼啦！

.flex-container {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

範例請參考 codepen：

動態三欄式

除了用flex-grow動態調整他們的大小外，還用了order調整版面的順序

不同的圖片 / 區塊排列

這種排版變化比較多一點，但不知道怎麼稱呼它，所以直接看範例比較清楚 XDDD。

一樣是大量運用到flex屬性做調整，在這個例子中，flex-basis尤其為最重要，當然還有一些對齊的語法也不能少。以下是有用到的語法：

flex-wrap
flex-basis
justify-content

以上三種排版，是我目前想到可能比較有趣，或是比較實際的例子 XD，如果有特別想要了解某些版面換成flex該怎麼寫的話，也可以留言給我唷！

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果

日期：2015.11.04
留言數：2
標籤：css 語法 responsive RWD 技巧筆記

Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果，如果希望小工具也可以用 RWD 效果的話，可以在 CSS 加入以下程式碼：

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/

/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

語法來源：http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive

CSS Media Queries 介紹與基礎應用

日期：2012.11.22
留言數：4
標籤：css 語法 CSS3 RWD 原創教學觀念

「Responsive Web Design」這個觀念與技術已經發展一段時間了，但這一年幾乎荒廢了我的 Html/CSS 學習之路，所以對於 Responsive web design 的觀念仍是懵懵懂懂，但 Google 是萬能的，所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design：

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
(網站使用 CSS3 media queries (使用方法為 @media +各種規則)，調整我們設計的版面。讓版面更加彈性，可以在不同的設備上瀏覽網站。)
Responsive web design – Wikipedia, the free encyclopedia

也就是說，如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站，我們要先會運用 @media 這個新的 CSS3 的屬性。因此我花了一些時間，想先了解 @media 可以怎麼用? 會有怎樣的效果? 假使你跟我一樣，對 @media 懵懵懂懂還摸不著邊際，歡迎跟我一起學習；假使你已經是 RWD 大師，也歡迎幫我看看，我這樣的學習筆記認知，在觀念或是應用上有甚麼需要改進的地方 😀

Media Queries 介紹與基礎應用

Media 跟 Queries，我們可以先把它拆成兩塊來看：

基本呼叫 Media 的方法

@media 是 CSS 擴充元件的寫法之一，我們可以把它當成是 CSS 的類別，可能會比較好懂。 @media 呼叫方法有三種，範例如下：

1. HTML 在呼叫 CSS 的時候，將 media 的條件加入：

<!--這段話表示 當螢幕寬度在 400px ~ 700px 之間，我們就會使用 test.css 這個檔案-->
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="test.css">

哈，是不是很有 IE Conditional Comments 的 FU。扯遠了，拉回~

2.直接寫在 css 檔案裡：

/*直接將 media 的條件寫在 CSS 裡，裡面包的是各種 class/ ID 的 css 設定*/
@media screen and (min-width: 400px) and (max-width: 700px) {
  a {
     color: red;}
  .entry {
     margin-top: 10px;
     font-size: 20px;}
}

3.使用 @import：

/*在 CSS 裡使用 @import。
以下解釋為當螢幕寬度在 400px ~700px 之間，就會將 test.css 的檔案呼叫匯入，並套用設定。*/
@import "test.css" screen and (min-width: 400px) and (max-width: 700px)

Queries 基本使用方法

Query 顧名思義就是「查詢」的意思，我們如果要非常熟練的運用 media，各種條件跟條件之間的查詢是不可或缺的。

像是前面範例運用的 (min-width: 400px) and (max-width: 700px) ，那個「and」就是 Query 的一種。

Query 的語法只有三大項：not, and, only。我們最常用的是「and」，不難記，中文解釋也很簡單，比較困難的是，要怎麼加你心中設想的條件，用成語法呈現出來，所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在，也可以同時存在，只要用「,」隔開條件串即可。

1. and 使用方法：

單一條件：

/*如果螢幕寬度為 500px (含) 以上，就套用這些 css 設定*/
@media screen and (min-width:500px) { 
  css 設定寫在此
}

/*如果螢幕視窗為直立，就套用這些css設定
螢幕視窗橫向說法: orientation:landscape*/
@media screen and  (orientation: portrait) {
  css 設定寫在此
}

同時符合兩種條件：

/*螢幕寬度在 400px ~ 700px 之間，就套用這些 css 設定*/
@media screen and (min-width: 400px) and (max-width: 700px) {
  css 設定寫在此
}

兩種條件，符合一種即可

/*如果是彩色螢幕，或彩色投影機，就套用這些 css 設定*/
@media screen and (color), projection and (color) {
  css 設定寫在此
}

2. only 使用方法：

有的瀏覽器並不支援 Media Queries，但支援 Media Type，所以我們可以用only來阻擋這些瀏覽器。

<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (color)">

以上這段語法的意思為：

支援 Media Queries & Media Type 的瀏覽器：如果是彩色螢幕，就會讀取 test.css。
不支援 Media Queries，但支援 Media Type 的瀏覽器：因為有寫 only 條件，所以不會往下讀「彩色螢幕」，所以不會呼叫 test.css
不支援 Media Queries & Media Type 的瀏覽器：不管有沒有 only，都不會呼叫 test.css

3. not 使用方法：

not是用來排除某些設備的樣式，假設你希望這個樣式只在 A 設備有作用， B 設備完全沒用，就可以使用 not 囉。

舉例如下：

/*彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定*/
@media not screen and (color), print and (color) {
  css 設定寫在此
}

我們也可以換個寫法，用數學運算子的括號先決，應該會比較清楚：@media (not (screen and (color))), print and (color)

Media 支援 type 與 features (值)

Media Type

Media 常見的支援裝置有: all, screen, print ，以下列出所有支援的裝置類型(by @W3C):

all ：所有可適用的裝置。
braille ：盲人點字器。
embossed ：盲人點字印表機。
handheld ：手機/ PDA裝置。
print ：印表機列印輸出。
projection ：全螢幕投影輸出。
screen ：一般電腦螢幕 (含iphone, ipad)。
speech ：朗讀式裝置。
tty ：由文字長度決定大小的終端機裝置。
tv ：電視。

Media Feature

width | min-width | max-width
(寬度 | 最小寬度 | 最大寬度)
height | min-height | max-height
(高度 | 最小高度 | 最大高度)
device-width | min-device-width | max-device-width
(裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
device-height | min-device-height | max-device-height
(裝置高度 | 裝置最小高度 | 裝置最大高度)
orientation (value: portrait | landscape)
(裝置旋轉方向值:直立 | 橫向)
aspect-ratio | min-aspect-ratio | max-aspect-ratio
(螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例)
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
(裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例)
color | min-color | max-color
(彩色 | 最小顏色bit數 | 最大顏色bit數)
color:0 表示該裝置為黑白(單色)
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
(單色 | 最小單色bit數 | 最大單色bit數)
monochrome :0 表示該裝置不是黑白(單色)
resolution | min-resolution | max-resolution
(解析度 | 最小解析度 | 最大解析度)
scan (value:progressive | interlace)
(TV 專用掃描)
grid

寫到這覺得篇幅好像過長，而且大家消化也需要一點時間，關於 Media Queries 更進階的運用，以及權重說明，等我更加瞭解後，再整理一份給大家參考吧!!

其實如同我開頭所言，RWD 的技術已經蠻成熟了，也許我這篇教學已經來的有點晚，網路上已經有很多相關應用與例子，不過還是希望經過我這樣的說明，大家可以更瞭解 Media Queries 的使用方法 😀

Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C