LikeButton的Resize魔法
CSS的相對單位
確認問題所在
當第一代LikeButton推出的時候，我們被一連串responsive的問題玩死了，LikeButton不能在所有device保持美觀。因為LikeButton使用<iframe/>去嵌入網頁時闊度與長度的比例是固定的，我們使用了很多media queries(網頁CSS的技巧)去令到LikeButton保持美觀，特別是使用細螢幕的device時。
經過無數的調整，最後我們處理不了 media queries。幸好我們能發現問題的核心是在 CSS。我們發現大部份的 media queries，只是調整一下闊度、高度、字體大小、和 flex-box 設定等，並使用了 brute force 的方法，請看下圖的例子：
從以上 CSS 得知，我們真正需要的是一個方法，根據螢幕的闊度去調整東西的大小。Netflix 網站啓發了我們得到了解決方法，當我們 resize Netflix 網站時，文字等 elements 會根據螢幕闊度去調整大小。我們查看了 styles，終於得到了答案。我們決定重新打造一個 LikeButton。
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 語言，把它變成函數並在任何地方使用。
限制大小
當完成了轉換，我們發現 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。
總結
有了 viewport 單位，我們可以根據螢幕尺寸，調整 element 的大小，並使用 rem 去限制大小，這樣，也會有更佳的兼容性。但在以下情況可能會出現問題：
- 有其他 elements 可能也會用到
rem，但可以使用多個轉換函數去解決。 - Responsive element 是與螢幕闊度無關的。
- 當 responsive element 少於螢幕闊度 30% 時，文字會變得太小而難於閱讀，這可加 media queries 去解決。
最後給大家一個小貼士，遇到問題時，可以看看其他網站偷師，這時一個好習慣，說不定重要關頭可救你一命。
相關鏈結： LikeChain 介紹｜8月工作重點｜WordPress 外掛簡介有關 LikeCoin
LikeCoin 為一區塊鏈協議，透過重新演繹的 LikeButton 和獨有的 LikeRank 算法，追蹤內容足跡，從而回饋協作創作中的所有參與者。這個機制稱為創造力證明（Proof of Creativity）。緊貼 LikeCoin 消息，加入我們的社群
websitelike.coMediummedium.com/likecoin/zh/Facebookfb.com/LikeCoin.Foundation , fb.com/groups/likecoinTelegramt.me/likecoinTwittertwitter.com/likecoin_fdnYoutubeyoutube.com/c/LikeCoinGithubgithub.com/likecoin
