前端工程師偷吃步小技巧-CSS的浮動屬性

前端工程師偷吃步小技巧-CSS的浮動屬性
前端工程師偷吃步小技巧-CSS的浮動屬性

怎樣才能在前端工程師表現更得心應手?首先你應該要先認識CSS的浮動屬性!

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 自己練習一次程式,才能達到最佳的學習效果哦!

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


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


CSS教學-display與visible屬性介紹


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


掌握這些小技巧,網頁前端輕鬆學!


前端工程師之Javascript入門第二十二課-數學物件


網頁前端偷吃步小技巧-display與visible屬性介紹

前端工程師偷吃步小技巧-CSS的定位元素

前端工程師偷吃步小技巧-CSS的定位元素
前端工程師偷吃步小技巧-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)屬性

 

 

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


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


CSS教學-display與visible屬性介紹


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


輕鬆轉行不卡卡!零基礎也能輕鬆學網頁前端!


只要5分鐘!讓你了解前端工程師跟後端工程師差別!


自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異
自學網頁前端筆記分享-display與visible屬性差異

想要自學網頁前端嗎?本篇的分享就是要帶你認識display與visible屬性差異哦!

 本篇將會介紹網頁前端排版的兩個 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。網頁前端下一章我們將會一一介紹。

 

 

 

 

 

 

推薦文章:
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


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


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


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


搞不懂Javascript變量命名?問前端工程師就對了!


網頁前端要成功關鍵,就是JavaScript!!


Javascript入門第十九課-方法

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!
工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

想轉行當前端工程師其實沒那麼難?遵照以下步驟以下步驟照著做,讓你夢想不再是空想!

今天要跟大家分享的文章是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學習方法記得關注達內教育評價。最後祝大家都能夠順利學成,成為一名優秀的網頁前端工程師。

 

 

推薦文章:
如何成為前端工程師?首先你要先具備…


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


SEO無痛該怎麼做?資深前端工程師教你對的方法!


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


厭世代正風行?來上Java課程可以幫你扭轉困境!


Python課程搭配產業知識,科技不再冰冷無趣


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

頂尖前端工程師必備技能之八-媒體類型區別

頂尖前端工程師必備技能之八-媒體類型區別
頂尖前端工程師必備技能之八-媒體類型區別

身為前端工程師你,夠了解Media 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教學系列文章目錄

  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基礎概念


想當頂尖前端工程師?以下必備技能可不能少!


成為專業前端工程師前,先搞定CSS背景位置設定!


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


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


URL網址怎麼設定攸關SEO優化表現


OpenAI創辦人馬克思要離開自己的人工智慧團隊!發生什麼事?

頂尖前端工程師必備技能之七-判斷條件使用技巧教學

頂尖前端工程師必備技能之七-判斷條件使用技巧教學
頂尖前端工程師必備技能之七-判斷條件使用技巧教學

前端工程師在設計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 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

 

 

 

推薦文章:
頂尖前端工程師必備技能之八-媒體類型區別


想當頂尖前端工程師?以下必備技能可不能少!


CSS中空格逗號區別為何?跟著前端工程師做一次就知道!


Java課程、UI課程、程式課程、網路行銷課程推薦


全球最大賣場人員自從有了這款人工智慧玩具,每個人都笑顏逐開了?!


網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?


在網路上人氣紅不讓的達內教育,到底有多威?點進來就知道!

頂尖前端工程師必備技能之六-媒體特徵樣式(下)

頂尖前端工程師必備技能之六-媒體特徵樣式(下)
頂尖前端工程師必備技能之六-媒體特徵樣式(下)

在上一篇前端工程師必備技能提到Media feature的兩大特性,在本篇則會著重於媒體特性的顏色及互動介紹哦!

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

 

 

 

推薦文章:
頂尖前端工程師必備技能之七-判斷條件使用技巧教學


頂尖前端工程師必備技能之五-媒體特徵樣式(上)


SEO無痛該怎麼做?資深前端工程師教你對的方法!


Java課程、UI課程、程式課程、網路行銷課程推薦


擠進高薪科技大門-Java課程等你來瞭解!


URL網址怎麼設定攸關SEO優化表現


對於人工智慧,特斯拉創辦人和臉書創辦人各自的觀點差好多!

頂尖前端工程師必備技能之五-媒體特徵樣式(上)


頂尖前端工程師必備技能之五-媒體特徵樣式(上)
頂尖前端工程師必備技能之五-媒體特徵樣式(上)

前端工程師在設計RWD網頁總是會需要用到Media feature,但你夠了解它嗎?

【前文提要】RWD 網頁設計必備語法:Media Query

前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type),再針對這些類型 (Media Type) 定義其樣式 (Media Feature),而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。

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

 

 

 

推薦文章:
頂尖前端工程師必備技能之六-媒體特徵樣式(下)


頂尖前端工程師必備技能之四-設定流動圖片Fluid Image


SEO無痛該怎麼做?資深前端工程師教你對的方法!


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


Python神童巴克西:史上最年輕AI工程師(上)


拯救生命的福星又多一個-人工智慧新一創舉


利用robots meta遮三醜,SEO優化到最高點!

 

 

頂尖前端工程師必備技能之四-設定流動圖片Fluid Image

頂尖前端工程師必備技能之四-設定流動圖片Fluid Image
頂尖前端工程師必備技能之四-設定流動圖片Fluid Image

聽前端工程師說在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 ,若圖尺寸不夠則無法填滿。

本篇為「前端工程師必備的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

 

 

推薦文章:
頂尖前端工程師必備技能之五-媒體特徵樣式(上)


頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計


CSS中空格逗號區別為何?跟著前端工程師做一次就知道!


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


鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了


必學網頁設計課程CSS基礎第一篇:教你在HTML導入化妝師CSS!!


天啊,運河眾多的荷蘭,為了方便,竟發明了AI人工智慧自駕船?

頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計

頂尖前端工程師必備技能之三-流動布局(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教學」系列文章第二篇,全系列文章如下:

前端工程師的基礎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

 

推薦文章:
頂尖前端工程師必備技能之四-設定流動圖片Fluid Image


頂尖前端工程師必備技能之二-Media Queries使用技巧


前端工程師與後端工程師傻傻分不清?從以下幾點就可以輕鬆分辨!


想用語音辨識但怕自己有台灣國語?別擔心!這人工智慧聽得懂!


網頁設計學習零負擔-簡易的HTML5教學


Java課程、UI課程、程式課程、網路行銷課程推薦


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!