LikeButton的Resize魔法

感谢原文作者：Tat，本文为中文翻译
CSS的相对单位
确认问题所在
当第一代LikeButton推出的时候，我们被一连串responsive的问题玩死了，LikeButton不能在所有device保持美观。因为LikeButton使用

中期的设计经过无数的调整，最后我们处理不了media queries。幸好我们能发现问题的核心是在CSS。我们发现大部份的media queries，只是调整一下阔度、高度、字体大小、和flex-box设定等，并使用了brute force的方法，请看下图的例子：

从以上CSS得知，我们真正需要的是一个方法，根据屏幕的阔度去调整东西的大小。Netflix网站启发了我们得到了解决方法，当我们resize Netflix网站时，文字等elements会根据屏幕阔度去调整大小。我们查看了styles，终于得到了答案。我们决定重新打造一个LikeButton。

查看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语言，把它变成函数并在任何地方使用。

巨大的LikeButton限制大小
当完成了转换，我们发现LikeButton在桌面时会显得十分巨大。要解决这个问题，转换函数可以在某些情况下，根据屏幕阔度而改变，我们解决的方法是使用另一个相对单位—rem。
rem—相对于root element的字体大小—w3schools.com
Root element毫无疑问就是，假设字体大小为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。

最大阔度的LikeButton总结
有了viewport单位，我们可以根据屏幕尺寸，调整element的大小，并使用rem去限制大小，这样，也会有更佳的兼容性。但在以下情况可能会出现问题：
有其他elements可能也会用到rem，但可以使用多个转换函数去解决。
Responsive element是与屏幕阔度无关的。
当responsive element少于屏幕阔度30%时，文字会变得太小而难于阅读，这可加media queries去解决。
最后给大家一个小贴士，遇到问题时，可以看看其他网站偷师，这时一个好习惯，说不定重要关头可救你一命。
以下方式关注我们
官网：https://like.co/
Medium：medium.com/likecoin/zh/
Facebook：fb.com/LikeCoin.Foundation,fb.com/groups/likecoin
电报群：t.me/likecoin
Twitter：twitter.com/likecoin_fdn
Youtube：youtube.com/c/LikeCoin
Github：github.com/likecoin