網頁設計師的達內教育評價,家庭事業兩得意!

達內教育評價-成功轉職網頁設計師,不再擔心顧不上家庭了!

▲ 家庭事業兩相顧，是許多職業婦女的心願

「現在的我，擁有更多時間陪伴我的三個孩子以及老公，比起以前創業沒日沒夜的日子，真的是幸福太多了！」

追求夢想並不是年輕人的專利，不管年紀多大，只要有年輕的心態，一樣可以翻轉人生，成為人人稱羨的職場勝利組。這就是我在達內教育見到洪O惠小姐的想法。她讓我知道年齡並不可怕，可怕的是衰老的心態。
現年44歲的洪小姐，在沒日沒夜的十年設計生涯結束後，才驚覺到,她錯過了三個可愛孩子的成長歷程，更與先生的感情出現裂痕。這樣的發現讓她重新考慮自己的職涯方向：「重新開始，我想找個工作就是朝九晚五，可以陪伴家人的職位。」而下定決心的她幸運的找到了適合自己的課程，讓她能無縫結合自己15年的設計專業，用於目前蓬勃發展的網頁設計中，帶給她與眾不同的職涯體驗,以下就是她的達內教育評價。

▲ 擺脫負債、成功轉職網頁設計師的洪小姐現在有更多時間陪家人

為什麼認為達內的課程適合自己呢？

「就是那位親切的線上專員呀！她真的很細心介紹你們的網頁設計課程！」詳盡的諮詢內容讓她對達內的專業以及用心毫不遲疑。「她甚至沒有跟我面對面，以線上文字的方式就完整且清楚的了解了我的需求以及擔心。」為了第一時間了解學員的課程需求，達內教育在學員進入課程網站的第一時間，就會有線上諮詢人員隨時解答學員的所有疑惑，這樣的貼心也讓洪小姐給了達內教育貼心專業的評價。
本來以為達內教育像是一般坊間的電腦教學機構「老師示範一次，畫面切換，依樣畫葫蘆！」洪小姐提及以往的電腦學習經驗，眉頭甚至皺了一下：「這樣的學習根本沒有思考吧！」對於面授課程的評價都已如此負面了，意興闌珊的洪小姐卻在貼心的線上客服人員鉅細靡遺的解說下，更清楚了解達內教育與業界緊密結合的課程規劃，並決定親身試試達內的線上網頁設計課程。

讓你學會思考，更點亮職涯的電腦課程

聽一遍，不懂？那就再聽一次！線上課程的好處就是你可以一看再看，還是不懂就問輔導老師。對於洪小姐這樣擔心麻煩別人的貼心學生，線上課程不僅減輕了她在理解學習上的壓力，也讓她更能掌握自己學習進度。這是她從來沒有想過的線上課程優點，也是她對於達內教育給予極高評價的原因之一。但是線上課程機構百百間，能讓洪小姐鍾情於達內教育的最主要原因，當然還是優質的課程編排以及實力堅強的師資群。
「他總是說：就說你們很厲害吧！你們寫的語法很多工程師都不會寫呢！」洪小姐笑著說著那位對學生滿滿鼓勵的段惠勇老師。達內教育的老師們，不但具備業界實戰的經驗，更時常獲得親切幽默的評價。這一切都讓本該死氣沉沉的線上網頁設計課程，都更加的活潑快樂了起來。轉職期的迷惘與壓力，也因為段老師的妙語如珠而顯得輕鬆了些。

年齡不是設限，被設限的是你的心

「我44歲，是兩個孩子的媽，我跨出來了，我相信你們也可以！」信心滿滿的洪小姐笑著說，志得意滿的稱自己做到了許多年輕人可能也不敢輕易嘗試的事情。所以，如果你自認寶刀已老，不妨看看洪小姐的勇氣與決心。若你尚年輕，又有什麼理由不去試一試呢？這就是這位主婦的達內教育評價

相關文章

達內教育和 Adobe國際認證成功簽約!

從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤

達內教育與惠普.英特爾合作,為培育更多IT人才!

白帽SEO黑帽SEO到底差在哪? 不都一樣是SEO嗎?網路行銷課程小常識

Python課程也能教你拍電影?AI漫畫真人電影版就要和大家見面了!!

Python課程是AI技術先修班,但訓練AI的是他們!!

Python課程教會你AI人工智慧,但你知道AI也需要老師嗎?

2天考取Google Ads證照！新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證? 五種 GoogleAds 廣告不藏私攻略

從無到有-挑戰14小時取得Google證照

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

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

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

 

第一步：把握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概念:行動設備優先的設計考量

前端工程師的RWD行動設備優先設計考量有哪些呢?

行動載具特性

圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式
手機、平板等行動設備在操作上與電腦差異很大。電腦以滑鼠操作為主, 行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。
行動載具的基本特徵有以下幾點：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）和文字虛擬鍵盤。
除了上述與電腦有所差異的特徵外，行動載具在視覺呈現上也與電腦差別很大。
因此前端工程師與 網頁設計需注意的事項如下：


按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。

超連結大小：
除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。

UI 設計：
UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。

點擊效果：
在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。

互動效果：
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的 網頁設計師與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（原始簡報與影片)，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。
現在越來越多的人使用行動裝置上網，根據美國最大電信業者 AT&T 的數據，手機流量在 3 年內成長了 50 倍，目前行動裝置上網的使用率仍在激增當中，而且還有更多的功能持續被開發出來。
相較於傳統的電腦，行動裝置的使用較不受到時間空間限制，無論是在捷運、廁所等都可使用，人們也花了不少零碎時間使用手機上網，因此瀏覽網頁的頻率跟電腦比起來有過之無不及，所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。
那「行動優先」要如何套用到網頁設計上？ 前端工程師 一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容，然後再以這些基本內容都存在的狀況下，針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來，網頁在行動裝置呈現的介面會非常好瀏覽且美觀，該有的功能、內容都有，並且由小畫面擴大至大畫面，內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強（Progressive Enhancement）」)。但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放就會越來越困難，常常需要透過刪減內容，才能「塞」入較小的版面當中。這樣一來，有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容，而無法給使用者完整的內容 (參見「優雅降級（Graceful Degradation）」)。
若要建立良好的行動裝置使用者體驗 (UX)，應考慮以下幾點：

• 使用者使用行動載具的習慣、方式及思考模式
• 提供明確精要的內容，比完整的導覽功能更重要
• 提供清楚且好觸控的導覽選單
• 簡潔明確的頁面內容
• 符合行動載具操作特性

現在大多數的 RWD 響應式網站，都是採用行動裝置優先 (Mobile First) 概念來設計，範例如下：

Youtube網站

就算是在手機上，也可以很方便的點閱影片、撥放、暫停，甚至對影片作評論、按讚！

Airbnb網站

選單的按鈕設計的大小適中，使用者用手機就可以輕易地透過選單找到目標住處，並且藉由滑動的行為瀏覽屋況，並按下預訂按鍵！

相關文章

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

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

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

企業們都在部屬AI人工智慧了,你還看不到它的潛力嗎?  

學寫網頁的第一堂課,前端工程師和後端工程師的差別

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

SEO優化的反派角色,快來了解它,說不定能派上用場!

前端工程師教你RWD: 什麼是「優雅降級」與「漸進增強」?

前端工程師必知的RWD概念「優雅降級」與「漸進增強」!

標準的RWD網站範例

現今的前端工程師和網頁設計師在開發網站或設計 UI 時都會選擇 RWD 網站。而在規劃 Media Query 的尺寸斷點時，有兩種布局斷點的依據, 分別是「根據設備」以及「以內容為主」，關於這兩種依據的不同如下：

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而設計多套樣式，再對應到各種設備上，這樣就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。

「設備優先」示意圖（圖片來源：http://static.codeceo.com）

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。

「內容優先」示意圖（圖片來源：http://static.codeceo.com）
  儘管如此，現今大多前端工程師與網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新，若採用此種方式，雖然無法精準的對應到特定的設備，但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變，重點依然是網頁內容的本身。
在內容優先的策略中，前段工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站 設計的過程：

「優雅降級」還是「漸進增強」?

圖上方為「優雅降級（Graceful Degradation）」的網頁設計模式；下方為「漸進增強（Progressive Enhancement）」模式

1. 優雅降級（Graceful Degradation）

一開始就針對「功能最完整」的平台來設計、開發網站，完成所有的功能和體驗後，再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案，以確保網站能在最新、最完整的平台上完美呈現，擁有「最好的使用者體驗」；而在較舊的或是功能限制較多的的平台上，仍然可使用最重要的功能，整體介面「簡陋卻可用 (poor but passable)」，而不是無法使用。

2. 漸進增強（Progressive Enhancement）

這個方式與「優雅降級（Graceful Degradation）」的方式相反，是先針對最不完整或是限制最多的平台上創建最重要的基本內容，用最精簡的方式呈現；然後以這些基本內容都存在的狀況下，開始慢慢擴展其佈局，隨著平台的限制越來越少，內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。


相關文章

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

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

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

現在只要你給人工智慧幾句話,他就能幫你寫出一篇文章!!

還不知道前端工程師該具備什麼能力?這篇可以輕鬆幫助到你!

SEO優化課程小撇步教學

上HTML5教學的必經之路1:先掌握初學者的敲門磚! 

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

前端工程師必備知識:RWD網頁與傳統網頁設計的差異!

在智慧型手機等行動上網的裝置普及之前，前端工程師與網頁設計師在做網站及設計 UI 時較輕鬆,因為網站只需要適應一種規格，在製作程序上對比今日的 RWD 網站也顯得比較單純簡單。製作程序的差異如下圖：

從上圖可以看出，前端工程師在開發 RWD 網站時，如果要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就要開發出 4-5 種版面，無論是在設計或是撰寫程式上,都比較費時且又難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點,再去進行網頁設計、程式撰寫，然後根據不同的尺寸斷點進行反覆測試、調整與修正。
(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。
在著手各種載具版面的設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。
(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。
網頁框架規劃 (Wireframe) 是運用文字線條、方塊，把每個區塊所要呈現的內容表現出來。盡可能減少設計元素，以突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區隔不同區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

相關文章

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

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

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

AWD 與 RWD 傻傻不知該怎麼用? 前端工程師上工前的必備課!

兩個以上的class名稱有沒有空格差很大!!前端工程師你知道嗎?

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

設定背景位置一點也不難!前端工程師必學知識不能錯過!

前端工程師的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的優缺點