前面介紹了一些前端工程師必知的語法,還是對媒體查詢懵懵懂懂嗎?沒關係,繼續看下去!!

前面介紹了一些前端工程師必知的語法,還是對媒體查詢懵懵懂懂嗎?沒關係,繼續看下去!!

為何會寫 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

 

推薦閱讀:

前端工程師學CSS字體單位-絕對單位篇

關於CSS的邊框(border)屬性,前端工程師大揭密!

前端工程師的背景設定順序!!

挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

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

達內教育學員見證

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

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()