讓文字配合 RWD 網站自動縮放大小
從手機、平板到桌機的 RWD 響應式網頁設計字級表 (Font-size) & CSS Media Queries
什麼是 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 breakpoints、The 100% correct way to do CSS breakpoints、The Most Used Responsive Breakpoints in 2017 Of Mine。
以下是在設計網站時調整後的最佳瀏覽尺寸。
範例分析
Google Fi
Google Fi 的網站字級大小分級單純，在網站設計時通常不會用到 <h1>~<h6> 所有的字級大小，且依照內容排版，會在同樣的 Tag 下也會加上不同的 Class去在設定字級。
好用資源
Fontface Ninja
是一款免費的網頁瀏覽器擴充功能，可以直覺的辨識當前網頁字型、字級、行高、字距、顏色，甚至可以直接試用與購買。
Font Flipper
是一個可以讓你即時瀏覽 Google Font字體在你的設計稿上效果的網站。上傳設計稿後輸入文字，便能調整大小、位置等等。有趣的是與 Tinder類似的喜歡/ 不喜歡選擇，你喜歡的文字將暫存在左側，電選後可直接下載或再次瀏覽。
