想成為前端工程師?跟著十四個步驟就對了!

前端工程師的學習路線圖表, 帶你一步步邁向成功!

今天要跟大家分享的文章是教你學習網頁前端的正確步驟! 很多人都想要轉職並希望能夠勝任網頁前端工程師的工作，但是仍未找到適合自己的學習方法。今天前端工程師課程的老師和我們分享了這篇正確的網頁前端學習路線圖，一起來一看究竟!

 

第一步：把握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學習方法記得關注達內教育評價。最後祝大家都能夠順利學成，成為一名優秀的網頁前端工程師。

相關文章

沒學過程式語言嗎?就從這幾個開始吧!

前端工程師必備RWD概念:行動設備優先的設計考量

前端工程師告訴你RWD網頁與傳統網頁設計的差異!

前端工程師CSS基礎功之逗號.空格的差異

前端工程師和網頁設計師看過來!-分辨RWD和AWD的優缺點

前端工程師和網頁設計師看過來!-AWD真的能對SEO無痛嗎? 

前端工程師都該了解的CSS字體單位:絕對單位

前端工程師的RWD基礎課程(8)流動圖片

前端工程師告訴你RWD的流動圖片該怎做!

前端工程師時常都要處理 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基礎課程(5)and/not/only判斷條件

前端工程師的RWD基礎課程(6)Media Features-上

前端工程師的RWD基礎課程(7)Media Features下

身為前端工程師還不知道什麼是CSS基礎語法格式嗎?

GOOGLE人工智慧好好玩!地表最強偵測機!

這因為Python課程而出現的公園,葫蘆裡到底賣了麼藥?

HTML5教學之標籤的重要性-網頁設計更上手的小秘密

前端工程師的RWD基礎課程(7)Media Features下

前端工程師必知的RWD媒體特性:顏色與互動!

 

【前文提要】何謂 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基礎課程(5)and/not/only判斷條件

前端工程師的RWD基礎課程(6)Media Features-上

前端工程師的RWD基礎課程(8)流動圖片

想成為前端工程師你,必須知道的事有這些!

想要逼真的翻頁效果卻不知怎麼做? HTML5教學6種模式讓你自由搭配!!

Python課程竟也能教你用AI人工智慧寫出一本暢銷書?

HTML5教學-CSS初學者計畫之想跟我玩文字遊戲?想得美!

前端工程師的RWD基礎課程(6)Media Features-上

前端工程師必知的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基礎課程(4)Media Type媒體類型

前端工程師的RWD基礎課程(5)and/not/only判斷條件

前端工程師的RWD基礎課程(7)Media Features下

前端工程師有這篇就不必再為HTML和CSS的網頁顏色代碼傷腦筋!!

前端工程師的必修課程-CSS的繼承關係

什麼都騙不過它!地表最強人工智慧影像辨識

前端工程師和網頁設計師看過來!-分辨RWD和AWD的優缺點 

前端工程師的RWD基礎課程(5)and/not/only判斷條件

前端工程師在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基礎課程(3)Media Query的使用方法

前端工程師的RWD基礎課程(4)Media Type媒體類型

前端工程師的RWD基礎課程(6)Media Features-上

Python課程打造未來世界!! AI人工智慧車輛公園在日本新落成!!

對比快重要-網路行銷課程重要守則

SEO優化方法百百種,今天再給你一個偷吃步的資訊!快來看看!

HTML5教學讓你的電子書讀起來不再卡卡der!!

前端工程師的RWD基礎課程(4)Media Type媒體類型

前端工程師製作RWD網頁的Media Type媒體類型是什麼? 

   

【前文提要】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基礎課程(2)流動布局Fluid Grid

前端工程師的RWD基礎課程(3)Media Query的使用方法

前端工程師的RWD基礎課程(5)and/not/only判斷條件

HTML5教學讓讀者更能享受讀電子書的樂趣!

網路行銷課程裡,最不容忽略的絕對是來自鄉民的力量! 

SEO優化偷吃步!直接給你範例,讓你直接贏在起跑點囉!

學習Python課程更方便!! Windows 10 商店開放下載!!

前端工程師的RWD基礎課程(3)Media Query的使用方法

前端工程師網頁設計的必備語法"Media Query"

前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 HTML5 和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基礎課程(1)RWD基礎概念

前端工程師的RWD基礎課程(2)流動布局Fluid Grid

前端工程師的RWD基礎課程(4)Media Type媒體類型

HTML5教學----CSS基礎語法:字型與文字排列相關順序

SEO優化師都愛用的五招URL提升流量,你都會了嗎?

網路行銷課程壓軸收藏,讓0-99歲的人都愛上你

看過來!網頁設計課程教你如何用CSS讓你的網站加分! 

前端工程師的RWD基礎課程(2)流動布局Fluid Grid

前端工程師告訴你什麼是"流動布局 Fluid Grid "

前端工程師在撰寫RWD網站時，使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」兩種技術的結合。

 

Grid Design (網格式設計)

前端工程師在設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值與最小值。當寬度超過或低於某限制時，版面依然可以固定。這樣一來，若螢幕寬度大於其最大值時，元素的兩側就會留白，這樣就可以確保網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。
網頁設計 過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」

1.float (浮動)

下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。

See the Pen float-right-n-left by Tedutw (@Tedutw) on CodePen.

過就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊

2.display: inline-block

跟上述的「float (浮動) 」一樣都可以將元素做到靠左或式靠右對齊，差異是 float (浮動) 會與其他的元素重疊。display-inline-block 就沒有這個缺點。兩者差異的例子如下：

See the Pen float vs inline:block by Tedutw (@Tedutw) on CodePen.

<

Liquid Layout (液態排版)

另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」，主要原理就是把尺寸單位改成百分比來製作版面，使每一個區塊的尺寸都能根據瀏覽器的大小自動做調整，而非以固定的尺寸呈現。參考語法如下：

div｛
  width: 36%
｝

但是一開始做 網頁設計 時，就使用百分比 (%) 這類的相對尺寸來制定元素的大小是有難度的。這時就可以先以固定尺寸 (px) 來製作，等網頁完成後再轉換成相對尺寸 (%) 。

轉換公式參考：子元素的百分比 =｛欲變更元素的固定尺寸 / 父元素的固定尺寸｝*百分比。

舉例來說：假設整個網頁版面是用 1024px 固定寬度來設計，而要變更的 div 區塊寬度為 360px，則整個網頁版面可視為父元素；欲變更的 div 區塊則視為它的子元素，此例套用公式則為：｛360px (欲變更元素的固定值) / 1024px (父元素的固定尺寸)｝*百分比 = 35.15625%。
除了各子元素可以這樣換算之外，padding 跟 margin 也可以用這個方法來換算，範例如下 :
padding: 8px，換算成百分比的公式為：
｛8px / 1024px (網頁版面的固定尺寸，視為父元素)｝*百分比 = 0.78125% 這時 padding: 0.78125%。

相關文章

前端工程師的RWD基礎課程(1)RWD基礎概念

前端工程師的RWD基礎課程(3)Media Query的使用方法

網頁設計師教你AWD 要怎麼做才能對 SEO 無痛!

如何區分前端工程師與後端工程師?

想要前進工程師,到底學Python還是Java的CP值高?

Python課程跨界電影圈?日本人氣AI漫畫改編電影明年上映!!

Python課程讓你創造AI,但你沒想到AI也需要老師吧!!

前端工程師的RWD基礎課程(1)RWD基礎概念

前端工程師這就來教你RWD基礎概念!

為什麼寫 RWD 響應式網站會成為當代前端工程師的必備技能呢？因為 RWD 響應式網站的元素 (圖片、影片等) 可以隨著螢幕大小變動。響應式網站 (RWD) 是基於流動布局（Fluid Grid）、流動圖片 (Fluid Images) 和媒體查詢（Media Queries）等三個核心概念的技術組合，能呈現出非固定尺寸的網頁狀態，有別於以往固定寬度的網頁布局。

流動布局（Fluid Grid）

流動布局（Fluid Grid，又稱「液態布局」或「液態網格」）的原理，是將網頁的各種元素，以可以縮放、浮動的區塊來做配置，讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。例如，A 網頁中有兩個區塊可在電腦螢幕上並排展示，但在手機上因螢幕寬度太小而無法並排顯示時，後面的區塊就會自動排到前一個區塊的下方，所以不會產生水平卷軸 (Scrollbar)。
在流動布局中，寬度也常以百分比 (%) 為單位 (傳統的網頁常以像素 px 作為唯一單位)， 前端工程師 按照此原理可讓網頁能依照裝置的螢幕尺寸，自動依照比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。

媒體查詢（Media Queries）

媒體查詢（Media Queries）如字義所示，就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給 網頁設計 什麼樣的樣式。簡單的說，就是針對你的裝置，給你不同的樣式設定。
在這些屬性包含設備類型、解析度、螢幕的尺寸等。在網頁上常用媒體類型 (media-type) 的為 all (所有裝置)、screen (螢幕裝置)、print (印刷裝置) 等。而常見媒體特徵 (Media Features) 有 min-width (最小寬度)、 max-width (最大寬度) 、resolution (解析度)、color (顏色) 等。

流動圖片 (Fluid Images)

因應 RWD 流動布局的特性，其圖片的尺寸也必須更靈活的隨著裝置螢幕大小而伸縮自如，是為「流動圖片 (Fluid Images)」。流動圖片 (Fluid Images)的尺寸也同流動布局以百分比 (%) 為單位。

關於 Viewport

在建構 RWD 網站的第一步， 網頁設計 會在網站開始的地方加入「Viewport」語法。語法如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5, user-scalable=no">

以上語法可以分成「initial-scale」、「maximum-scale」、「initial-scale」、「minimum-scale」、「user-scalable」與 device-width 五個部分來解釋，說明如下：

width=device-width

使用 device-width (裝置寬度) 作為可視域的寬度

initial-scale=1.0

「initial-scale」意思是「初始的比例」，「1.0」的意思是 100%，其數值範圍從 0.1 (意思是10%) 到 1.0 (意思是100%) 可任填。

maximum-scale=1.5

「maximum-scale」意思是「最大的縮放尺寸」，在此例中，最大的縮放尺寸為 1.5 比例。

minimum-scale=0.5

「minimum-scale」意思是「最小的縮放尺寸」，在此例中，最小的縮放尺寸為 0.5 比例。

user-scalable=no

「user-scalable」意思是「是否允許使用者自行縮放」，no 為不允許、yes 為允許。在此例中為 no。


相關連結

前端工程師的RWD基礎課程(2)流動布局Fluid Grid

複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!

想成為前端工程師必備知識:Class選擇器宣告法

哪尼?前端工程師要知道的父子繼承關係!?

地表最強偵測機!Google Vision API

對於要學Python還是Java毫無頭緒嗎?點進來解惑吧!

前端工程師的必要技能有哪些?