靠這三技能,前端工程師向"不專業"說再見~(1)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教學」系列文章第一篇，全系列文章如下:


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


🌌延伸閱讀看這裡：

靠這三技能,前端工程師向"不專業"說再見~(2)流動布局 

靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢

前端工程師課程再進化-Media Query的媒體特性(上篇)

SEO優化URL網址也可以很簡單! 解讀優化通通簡單說,讓你立馬懂!!

透過UI 課程 及Google 衛星圖就能一窺你的社區

"我們不一樣!"三分鐘了解前端工程師與後端工程師的差別!

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

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性: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」都是最常碰到的的 d
閱讀完整內容