前端工程師菜鳥手冊:學習路線圖總整理

今天的前端工程師菜鳥手冊:學習路線圖總整理,絕對是想當工程師的你必備的教戰手冊啊!

超佛心的達內教育評價小組特別統整網頁前端學習路線,要跟大家分享! 很多人想要轉職勝任網頁前端工程師，但是尚未找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線，一起來一看究竟!

第一步：把握HTML/CSS

這是基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。並且HTML/CSS也很簡單易學，沒得挑！

第二步：學會使用基本工具

文本編輯器：例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器：Photoshop、Illustrator 等
FTP/SSH 工具：Filezilla、PuTTY 等
網頁瀏覽器：Chrome、Firefox 等
雲端硬碟：Dropbox、Google Drive 等

第三步：進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型：String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步：搭建基本網站

使用如 Hostgator、Hostmonster 等虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師或前端工程師

現階段的你可以：
1. 建立簡單的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合，無法獨立架站)
接下來你還需要進修的有：
1. HTML/CSS框架：如 Bootstrap
2. 熟悉網頁後端的程式語言：PHP (建議初學者用)、Ruby 等
3. JavaScript 框架：如 React、Angular 等
4. 數據庫：如 MySQL

第六步：HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步：網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言，但是對程式語言初學者較難入手)
Python (簡單易學，但是尚未如 PHP 般普及，不過隨著 AI 的爆紅 Python 也越來越普及。

第八步：數據庫(專注於一個!)

關係型數據庫：如 MySQL
非機構化數據庫：如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步：有必要時，精進一些進階的前端技能：

SSH & Basic Command Line
CSS 預編譯器：如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步：應用

VPS 虛擬專用伺服器
應用雲端平台：如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步：恭喜你，成為一名全端工程師/後端工程師/網頁開發者了!

可以開發架設網站
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師，或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能)：精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架：路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能)：基於 PHP 的 CMS 網站

Wordpress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組，不過功能有限，適合需要快速架站的場合。

第十四步 (選修技能)：行動 App 開發

你不需要進修 Java 和 C 語言，只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App。
以上就是前端工程師課程老師為大家分享的前端學習路線!的文章，希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成，成為一名優秀的網頁前端工程師。

參考連結:
前端工程師基礎知識之一:Class選擇器宣告法!

前端工程師人人必備懶人包:網頁顏色代碼對照表

前端工程師的基礎知識:ID選擇器宣告法

前端工程師必備RWD基本概念(上)-RWD網頁與傳統網頁設計

前端工程師必備RWD基本概念(中)網頁設計的優雅降級和漸進增強

前端工程師必備RWD基本概念(下)行動設備優先的設計考量

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

前端工程師入門RWD教學(八)Media Query之媒體特性-下

想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的Media Query之媒體特性(下篇).

【前文提要】何謂 Media Query 與 Media Feature？ 前端工程師在製作 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 媒體特性的顏色 (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 反應

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



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

前端工程師的基礎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教學(一)基礎概念

前端工程師入門RWD教學(六)Media Query之判斷條件

前端工程師入門RWD教學(七)Media Query之媒體特性-上

入門前端工程師知識~得心應手不是夢-透析Class選擇器

為了成為前端工程師,我一定要成功-認識ID選擇器

CSS必學!前端工程師與Div.Span標籤的應用(上)

達內教育開幕　培養台灣IT人才進入全球企業

前端工程師入門RWD教學(七)Media Query之媒體特性-上

想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的Media Query之媒體特性.  

【前文提要】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基礎概念 前端工程師的基礎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 Query之媒體類型

前端工程師入門RWD教學(六)Media Query之判斷條件

前端工程師入門RWD教學(八)Media Query之媒體特性-下

為了成為前端工程師,我一定要成功-解析CSS語法格式

為了成為前端工程師,我一定要成功-認識Class選擇器

為了成為前端工程師,我一定要成功-認識ID選擇器

達內教育開幕　培養台灣IT人才進入全球企業

前端工程師入門RWD教學(六)Media Query之判斷條件

 

想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的Media Query之判斷條件.  

【前文提要】RWD 網頁設計必備語法：Media Query 前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。 參考文章：如何在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基礎概念 前端工程師的基礎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教學(四)流動圖片Fluid Image

前端工程師入門RWD教學(五)Media Query之媒體類型

前端工程師入門RWD教學(七)Media Query之媒體特性-上

前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!

為了成為前端工程師,我一定要成功-解析CSS語法格式

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

NOWnews 今日新聞

前端工程師入門RWD教學(五)Media Query之媒體類型

 
想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的Media Query之媒體類型.  

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

前端工程師在 網頁設計 運用 Media Query 時，首先第一步必須要指定媒體類型 (media type) 。目前最常用的有多種,一一介紹如下：

媒體類型(media type)	簡介
all	所有裝置
screen	螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小
print	印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf)
projection	投影機裝置
speech	朗讀裝置 (針對可「讀出」網頁的設備)

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

前端工程師的基礎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 Query之使用方法

前端工程師入門RWD教學(四)流動圖片Fluid Image

前端工程師入門RWD教學(六)Media Query之判斷條件

前端工程師初學者第三課:ID選擇器怎麼用?

前端工程師不可不知的網頁顏色代碼,今天直接整理給你!

達內教育又和這兩大數位企業合作了!快來看看這次的分享會內容!

達內課程先就業再付款- 中時電子報

前端工程師入門RWD教學(四)流動圖片Fluid Image

 

想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的流動圖片.

讀完「前端工程師必備的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網頁。這些 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基礎(一)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教學(三)Media Query之使用方法

前端工程師入門RWD教學(五)Media Query之媒體類型

攜手惠普和英特爾,達內教育又創新的巔峰!

前端工程師教你如何將CSS套用入 HTML文件~

達內課程先就業再付款- 中時電子報 

前端工程師入門RWD教學(三)Media Query之使用方法

 

想靠前端工程師發大財,首先你要懂什麼是RWD教學裡的Media Query.

RWD 網頁設計必備語法：Media Query

前端工程師在設計製作 RWD 響應式網頁時，相信都一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media ' 當作為 CSS 的擴充元件（這樣會比較好理解）。而在 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章講解重點)，最後再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。

 

Media Query 使用方法

如果要使用 Media Query ，則使用方式有下列三種：
1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">

2. 上面的功能，若使用 CSS 中使用，則為：

＠media screen  and (max-device-width: 400px){...}

3. 你也可使用 @import

@import "screen.css" screen and (max-device-width: 400px)

看了以上 Media Query 的使用方法後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。


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

前端工程師的基礎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教學(一)基礎概念

前端工程師入門RWD教學(二)流動布局

前端工程師入門RWD教學(四)流動圖片Fluid Image

前端工程師初學者第三課:ID選擇器怎麼用?

網頁顏色代碼為何總是散亂!?為了前端工程師,這裡幫你整理啦~

攜手惠普和英特爾,達內教育又創新的巔峰!

達內課程先就業再付款- 中時電子報

前端工程師入門RWD教學(二)流動布局