初階前端工程師常識集(一)-何謂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教學」系列文章第一篇，全系列文章如下:
更多閱讀:
初階前端工程師常識集(二)-Media Query使用方法?
多重class中空格與逗號該怎麼用?聽前端工程師建議準沒錯!
網頁要美得用對方法,連前端工程師也大讚好用的CSS背景設定!
程式課程選達內，美上市IT課程教育集團
人工智慧:為商業導向而研發或為改善人民生活而存在?
Python課程當你的好朋友幫助你
單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺
