LikeButton的Resize魔法

作者: Vivien_like | 来源:发表于2018-09-12 03:18 被阅读7次

感谢原文作者：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。