想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!

想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!
想當前端工程師嗎?首先你得了解前端工程師的養成計畫表!!

想報名前端工程師當個斜槓青年嗎?那你一定不能錯過今天的前端工程師養成計畫表!!

這一篇要跟大家分享2019年正確的網頁前端學習路線! 很多人想要轉職勝任網頁前端工程師網頁開發的工作,但是還沒找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線,一起來一探究竟!

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

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(一):七個內容模組簡介

簡明扼要的HTML5入門課程(二):用新的元素排版俐落又精簡!

簡明扼要的HTML5入門課程(三):網頁內容相關語意元素

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

想報名前端工程師的學員一定要看的學習路線圖在這裡!!

想報名前端工程師的學員一定要看的學習路線圖在這裡!!
想報名前端工程師的學員一定要看的學習路線圖在這裡!!

成為一名前端工程師是你的夢想嗎?在報名課程前先看一看前端工程師的學習路線圖吧!!

本篇要跟大家分享2019年正確的網頁前端學習路線! 很多人想要轉職勝任網頁前端工程師網頁開發的工作,但是還沒找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線,一起來一探究竟!

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

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:七個內容模組簡介

前端工程師必備HTML5入門課程:嵌入影片元素video

前端工程師必備HTML5入門課程:載入進度的顯示條

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

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

前端工程師RWD小課:什麼是媒體特性(下)
前端工程師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教學」系列文章第七篇,全系列文章如下:

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

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

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

 

 

 

 

 

 

 

 

 

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

前端工程師RWD小課:什麼是媒體特性(上)
前端工程師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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

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

 

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

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

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

 
(目錄)

  1. 前端工程師必備的RWD基礎(一)RWD基礎概念
  2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid
  3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法
  4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上
  7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下
  8. 前端工程師必備的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基礎」系列文章最後一篇,全系列目錄如下:

(目錄)

  1. 前端工程師必備的RWD基礎(一)RWD基礎概念
  2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid
  3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法
  4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上
  7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下
  8. 前端工程師必備的RWD基礎-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

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

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

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

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

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

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

【前文提要】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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

前端工程師RWD小課:Media Type有哪些?

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

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

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

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

 

 

 

 

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

前端工程師必學RWD 7 :媒體特性概說(下)
前端工程師必學RWD 7 :媒體特性概說(下)
前端工程師一定要知道的媒體特性下篇來啦!!今天要教大家定義顏色和互動的表格~

【前文提要】何謂 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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

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

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

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

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

 

 

 

 

 

 

 

 

 

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

前端工程師必學RWD:媒體特性概說(上)
前端工程師必學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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

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

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

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

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

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

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

前端工程師想做出流暢美觀不卡卡的網頁嗎?那你一定要知道流動圖片!!

 
(目錄)

  1. 前端工程師必備的RWD基礎(一)RWD基礎概念
  2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid
  3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法
  4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上
  7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下
  8. 前端工程師必備的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 ,若圖尺寸不夠則無法填滿。

 
全系列目錄如下:

(目錄)

  1. 前端工程師必備的RWD基礎(一)RWD基礎概念
  2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid
  3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法
  4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上
  7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下
  8. 前端工程師必備的RWD基礎-(八)流動圖片Fluid Image

 

 

其他閱讀

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

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

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

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

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

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

前端工程師必學RWD 5 :and/not/only判斷條件
前端工程師必學RWD 5 :and/not/only判斷條件
讓前端工程師霧煞煞的and/not/only!! 它們的判斷條件到底是麼呢?

【前文提要】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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

其他閱讀

前端工程師必學RWD 2 : 什麼是流動布局?

前端工程師必學RWD 3 :認識Media Query

前端工程師必學RWD 4 :Media Type的種類

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

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!