LikeButton的Resize魔法

Table of Contents

CSS的相對單位


確認問題所在

當第一代LikeButton推出的時候,我們被一連串responsive的問題玩死了,LikeButton不能在所有device保持美觀。因為LikeButton使用<iframe/>去嵌入網頁時闊度與長度的比例是固定的,我們使用了很多media queries(網頁CSS的技巧)去令到LikeButton保持美觀,特別是使用細螢幕的device時。

LikeButton的Resize魔法
中期的設計

經過無數的調整,最後我們處理不了 media queries。幸好我們能發現問題的核心是在 CSS。我們發現大部份的 media queries,只是調整一下闊度、高度、字體大小、和 flex-box 設定等,並使用了 brute force 的方法,請看下圖的例子:

LikeButton的Resize魔法

從以上 CSS 得知,我們真正需要的是一個方法,根據螢幕的闊度去調整東西的大小。Netflix 網站啓發了我們得到了解決方法,當我們 resize Netflix 網站時,文字等 elements 會根據螢幕闊度去調整大小。我們查看了 styles,終於得到了答案。我們決定重新打造一個 LikeButton。

LikeButton的Resize魔法
查看Netflix網站

Viewport單位

答案就是vw單位,這是其中一個 CSS3 相對長度單位,1 vw表示 1% viewport 的闊度。例如,viewport 的闊度是800 px (pixel,像素),1 vw就是8 px

重新打造LikeButton

計計數

首先用一個細螢幕的 device 做例子,這樣說明比較簡單。假設 LikeButton 最大的闊度等於螢幕的闊度,如320 px,這就是我們px / vw轉換的基準。如字體大小是16 px,便等於5 vw ( 16 / 320 * 100 )。除了字體,我們還需要使用這個轉換基準到其他所有的地方。幸運的是,我們可以使用 SCSS 為我們的 stylesheet 語言,把它變成函數並在任何地方使用。

https://gist.github.com/nwingt/84cd45f0ef6361c15374078ca5f19422#file-like-button-v1-scss

LikeButton的Resize魔法
巨大的LikeButton

限制大小

當完成了轉換,我們發現 LikeButton 在桌面時會顯得十分巨大。要解決這個問題,轉換函數可以在某些情況下,根據螢幕闊度而改變,我們解決的方法是使用另一個相對單位 — rem

rem — 相對於root element的字體大小 — w3schools.com

Root element 毫無疑問就是<html/>,假設<html/> 字體大小為320 px,我們要設定 child element 的字體大小為16 px,即等於0.05 rem ( 16 / 320 * 1rem ),所以我們把轉換函數變成 $value / 320 * 1rem
假設我們設定 media query 為1 rem = 100 vw,當螢幕闊度少於或等於 320 px時,如280 px,這樣字體大小會變為 14 px ( 0.05 * 100 vw = 0.05 * 280 px)。如我們要設定一個80 px的 avatar 圖像,當螢幕闊度大於320 px時,使用那個方程式,我們可以計算出圖像為0.25 rem = 80 px 當螢幕闊度是280 px, 圖像便會縮至70 px

https://gist.github.com/nwingt/4f46e9db423bc4b32fe37829e0badee9#file-like-button-v2-scss

LikeButton的Resize魔法
最大闊度的LikeButton

總結

有了 viewport 單位,我們可以根據螢幕尺寸,調整 element 的大小,並使用 rem 去限制大小,這樣,也會有更佳的兼容性。但在以下情況可能會出現問題:

  • 有其他 elements 可能也會用到 rem,但可以使用多個轉換函數去解決。
  • Responsive element 是與螢幕闊度無關的。
  • 當 responsive element 少於螢幕闊度 30% 時,文字會變得太小而難於閱讀,這可加 media queries 去解決。

最後給大家一個小貼士,遇到問題時,可以看看其他網站偷師,這時一個好習慣,說不定重要關頭可救你一命。

相關鏈結: LikeChain 介紹8月工作重點WordPress 外掛簡介