讓文字配合 RWD 網站自動縮放大小

從手機、平板到桌機的 RWD 響應式網頁設計字級表 (Font-size) & CSS Media Queries

Vera Chang
Apr 23 · 6 min read

什麼是 RWD?

RWD 指的是響應式 Web 設計(Responsive Web Design),能夠隨著不同容器如:電腦、平板、手機等螢幕大小調整內容排版。當使用現成 Bootstrap 框架或是版型時通常已預設字級大小,不太需要去調整。

但如果想建立一個完全客製化的響應式網站,就必須自行設定字級。關於 CSS 網頁字體,可調整的部分有字型、字體大小、字重、行高、字距、樣式、對齊、顏色、大小寫等,這篇文章將針對字級大小解析。

文章分為幾個段落:


文字大小的 CSS 語法

網頁常用的文字單位

  • 絕對數值:px 像素 ( Pixel ) 。 px 是相對於顯示器屏幕解析度而言的,1 px 並不是一個固定的長度,而是根據載具及其使用方式而定。
  • 相對數值:em。em 是基於基數來計算出來的相對字體大小,如未設置,則瀏覽器的默認字體尺寸為 16px。
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合:1em=16px。為了簡化font-size的換算,需要在css中的body選擇器中聲明 Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的 px數值除以10,然後換上em作為單位就行了。-- W3CSchool
  • 相對數值:rem。CSS3 新增的一個相對單位,這個單位與 em 的區別在於可以只修改根元素就成比例地調整所有字體大小,避免字體大小逐層復合的連鎖反應。
設定根元素 html {font-size:10px;},則body {font-size: 1.4rem;} 的字級大小則會是 1.4*10=14px

推薦使用相對數值 rem,對於 RWD網頁字級設定時只要調整 html 根元素的字體大小,便可使所有網頁文字同時等比例縮放,不必逐一修改。


網頁的字級表

平面設計排版時會將版面分為大標、中標、小標、內文、註解等不同字級字重區分版面與閱讀重要順序。

在網頁上也是同樣原則,一般來說分為

  • <h1>~<h6> 的標題
  • <p> 段落內文字
  • <a> 連結文字
  • <li> 表單內文字等等。

CSS Media Queries

一個良好使用的網站必須能夠適應不同裝置上的閱讀,因此現在大部分網站都符合 RWD 設計。在一個 RWD 的網站中會使用 @media 去定義不同螢幕尺寸的寬高,除了圖片與排版會隨著尺寸重新排列或縮放,也需要定義個寬度下的字級大小。每個網站的 Breakpoints 不一定相同,可參考 Media queries for common device breakpointsThe 100% correct way to do CSS breakpointsThe Most Used Responsive Breakpoints in 2017 Of Mine

以下是在設計網站時調整後的最佳瀏覽尺寸。

根元素 html {font-size:12px;}

範例分析

Google Fi

Google Fi 的網站字級大小分級單純,在網站設計時通常不會用到 <h1>~<h6> 所有的字級大小,且依照內容排版,會在同樣的 Tag 下也會加上不同的 Class去在設定字級。


好用資源

Fontface Ninja

是一款免費的網頁瀏覽器擴充功能,可以直覺的辨識當前網頁字型、字級、行高、字距、顏色,甚至可以直接試用與購買。

Font Flipper

是一個可以讓你即時瀏覽 Google Font字體在你的設計稿上效果的網站。上傳設計稿後輸入文字,便能調整大小、位置等等。有趣的是與 Tinder類似的喜歡/ 不喜歡選擇,你喜歡的文字將暫存在左側,電選後可直接下載或再次瀏覽。




謝謝你看到這裡,或許你想訂閱一份電子報?

Hello,我是Vera,目前在 IT 產業工作的 Visual Designer。如果有任何建議或合作提案也可以透過以下這些方式聯繫。BehanceDribbbleWebsite

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Vera Chang

Written by

Visual/ UI Designer & Editor of VHS — Design vitamin for creative mind. 一本視覺設計與閱讀的線上誌|verachang.net

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade