語法彙整 - Coding幫幫忙

前端工程師CSS小課:float浮動屬性

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是float浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。

如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法）：

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況

承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）：

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的，如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子，就是文字的部分「不」設定 float 屬性，但是在 logo 圖片的部分使用浮動屬性「float:right;」，文字的部分則不使用浮動屬性。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

若前端工程師想要做出兩欄或多欄的網頁，則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊， float 屬性都設定為「left」，左欄寬度為 20%；右欄為 80%：

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上有人說：前端工程師的網頁 layout 基石除了本章介紹的浮動（float）屬性之外，還有下一張會介紹的清除浮動（clear）。想當前端工程師的各位同學們請先把本章再複習一次，並親自使用 codepen 自己練習一次程式，才會達到最佳的學習效果！

更多關於前端工程師的文章請點閱下方連結!!

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜？

APCS 程式檢定，該從 C、Java 還是 Python 下手？

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍

所有APCS認證要知道的事都在這!!(上)

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

前端工程師CSS小課:定位元素

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是定位元素~

為了要設計出更複雜的網頁前端版面，前端工程師都必須知道 CSS 的所有「position 屬性」。如下所示，它有一大堆屬性值，這些屬性值不好理解且也不好記憶，但稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下，也建議各位想當前端工程師的學員們把這頁加入網頁書籤中，以便日後方便查詢。

See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS：Positioning Elements 定位元素

CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。

所有的元素都可用 top（上）、bottom（下）、left（左）與 right（右）屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。

靜態定位（position: fixed）

「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。

靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。

See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位（position:fixed）

固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。

不同於靜態定位，固定定位（position: fixed）的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位（position: fixed）」的範例，其中的 CSS 「position:static」改為「position:fixed」，則排版受到「top: 30px;right: 5px;」（上方距離30px、右側距離50px）的屬性影響，如下所示：

See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位（position: fixed）的元素會從「Normal flow （從左到右、上到下的排列）」的常態佈局中移除。所以其他未設定為「固定定位（position: fixed）」的元素，仍然依照「左到右、上到下」的排列，彷彿其中不存在固定定位的元素般。而固定定位的元素可與其他的元素重疊。

相對定位（position:relative）

所謂的「相對」，是以原本正常的位置為中心點，依照元素偏移原本位置多少而定數值。相對定位（position:relative）的元素可以結合 top、bottom、left、right 等屬性，使其元素「相對地」偏移原本該出現的位置。

如以下的例子，我們在原本的位置安插粉紅色背景的文字（文字為「相對定位」）區塊，並且設定該區塊相對於原本該出現的區塊「上方留空間 5px（top: 5px;）、左方留空間 5px（left: 5px;）」。

See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置，會被保留而不會消失。

相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位（position:absolute）

不得不說，絕對定位（position:absolute）是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像，不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。

當元素的 position 設定為 absolute 後，它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed，若有，則以父元素為定位的基準點；若無，則以該網頁頁面(“body”)的左上角為定位點置，看起來就是這張網頁的絕對位置一樣。

以下範例為兩個絕對定位（position:absolute）元素的範例，右上方的元素的父元素 position 沒有設定，因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個，因此該元素會以整個網頁區域為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px；而另一個元素的父元素 position 是 relative，因此會以父元素為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px。

See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。

所有的 CSS 版面配置：Positioning Elements 定位元素介紹到此結束。光看以上的解釋，會容易搞混。此時，不妨回到此章節的最前面的範例，點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼，並且親自練習一次這些 CSS 碼，試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話，就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動（float）屬性。

更多關於前端工程師的文章請點閱下方連結!!

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜？

APCS 程式檢定，該從 C、Java 還是 Python 下手？

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍

所有APCS認證要知道的事都在這!!(上)

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

超夯網頁前端小教室:display與visible

想學習網頁前端的你絕對不能不知CSS!今天要來跟大家就紹的就是display 屬性與visibility屬性!

本篇介紹網頁前端排版的兩個CSS屬性：display 屬性與 visibility 屬性。

CSS：display 屬性

display:block

對於 CSS 語法來說，網頁前端的每個元素都是一個矩形盒（rectangular box）模型。使用「display」屬性可以決定「盒（box）」的呈現方式。

又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符

以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下：

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值，並不強制換行。

將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下：

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用，元素隱藏後就不佔用任何空間，在網頁前端頁面顯示時不會展現出來，就好像該元素不存在一樣。

以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值，如 list-item、table、table-cell、table-column、grid 等，會在往後的章節中一一介紹

visibility 屬性

visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食，有兩個方法：一是上一段介紹的，將「display」屬性設為「 none」參數；二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意：以上兩個方法雖然都能將元素隱藏，但都呈現出不同的結果：

被「display:none」隱藏後的元素，就不會佔用任何的空間，就好像它從來都不存在一樣；而被「visibility:hidden」隱藏後的元素，雖然在網頁前端不會顯示，但仍佔用了對應的空間（就是被隱藏的元素有多大，網頁上空出來的空間就有多大），所以仍會影響排版。範例如下：

我們準備要將以下的例子，第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下：

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知，同樣都是將元素隱藏，第一個<p>元素雖然被「visibility:hidden」隱藏了，但是仍遺留下空間；第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」，連原本的位置都不見了。

下一張我們將介紹網頁前端排版的另一個 CSS 屬性：Positioning Elements。

更多網頁前端相關文章請到本部落格首頁搜尋~

其他閱讀

用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵真狗會被取代嗎？

今年10月即將入手的新身分證，它的UI設計有啥亮點？

你是我的眼！Google AI 眼鏡助視障朋友「看見」世界

給零基礎網站前端學員的入門簡介!!

前端工程師一定要懂的JavaScript變數命名規範~

UI學員看過來!即將登場的新式身分證有甚麼特別的呢!(上)

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

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

這一篇要跟大家分享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也很簡單易學，沒得挑！

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

第三步：進修 JavaScript

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

第四步：搭建基本網站

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

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

第六步：HTML/CSS框架

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

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

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

關係型數據庫：如 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 族、創業等。

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

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

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

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

你不需要進修 Java 和 C 語言，只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App。

其他閱讀

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

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

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

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

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

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

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

前端工程師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教學系列文章目錄

其他閱讀

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

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

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

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

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

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

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

前端工程師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教學系列文章目錄

其他閱讀

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

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

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

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

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

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

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

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

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


(目錄) 前端工程師必備的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 6 :媒體特性概說(上)

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

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

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

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

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

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

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

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

而 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小課:Media Type有哪些?

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

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

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

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

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

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

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

前端工程師一定要知道的媒體特性下篇來啦!!今天要教大家定義顏色和互動的表格~

本篇接續前篇介紹 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 反應