The Resizing Magic Within LikeButton

The Relative Units in CSS

Identifying the Problem

When we were rolling out the first version of the LikeButton, we were overwhelmed by tons of responsive issues. Since the button is embedded using <iframe/> with fixed ratio of width and height, we have set bunches of media queries to make it looks pretty, especially for small screen devices.

Intermediate design

After countless adjustments, we ended up facing some unmaintainable media queries. Nevertheless, we discovered the core of the problem within those CSS. We found out most of the media queries were just adjusting width, height, font size and flex-box settings, etc, by brute force, for example:

The above CSS is telling us what we actually need is a way that scale things respectively with screen width. The solution was inspired by Netflix web, when resizing Netflix web, elements such as text are actually scales respectively with screen width. By inspecting the styles, we finally got our answer. Therefore, we decided to rebuild the LikeButton once and for all.

Inspecting Netflix web

Viewport Unit

The answer is vw unit, which is one of the CSS3 relative length units, which 1vw means 1% of the viewport width. For example, if the viewport width is 800px then 1vw is equal to 8px.

Rebuilding the Button

Do the Maths

To make things simple, let handle small screen devices first, assuming the maximum width of the LikeButton is equal to screen width, say 320px, to be the base for our px/vw conversion. For example, if the font size is 16px, then we have16 / 320 * 100vw which is equal to 5vw. Hence, all we need is to apply this conversion to all metrics. Fortunately, we use SCSS as our stylesheet language, so we can turn it into a function and use it everywhere.

Giant LikeButton

Limit the Size

After applying the conversion, we found out the LikeButton was extremely large in desktop screen. To solve this issue, we need to set a condition for conversion function to change in certain screen width, the solution is to use another relative unit — rem.

rem — Relative to font-size of the root element — w3schools.com

Undoubtedly, the root element is <html/>, let say we set the font size of <html/> to320px, if we need to set the font size of any child element to 16px, we can set to0.05rem (16 / 320 * 1rem). Therefore, all we need is to change the conversion formula to $value / 320 * 1rem, and if we set a media query to set 1rem = 100vw when screen width is less than or equal to 320px, say 280px, then the font size is changed to 14px(0.05 * 100vw = 0.05 * 280px). If we have an avatar image with size of 80px, then by that formula, we got 0.25rem = 80px when width is greater than 320px, and the image size will shrink to70px when screen width is at 280px.

LikeButton with maximum width

Summary

With viewport units, we can scale element respect to screen size and we can use rem to limit the scaling, besides, their compatibility are also great too. However, it is not always perfect to use in some situations:

  • There are other elements also rely on rem, but this can be solved by multiple of conversion functions;
  • The responsive element are not respect to screen width;
  • The size of the responsive element is less than 30% of the screen width then the font size will be too tiny for users to read, this can be solved by adding media queries

Last but not least, it is a good habit for you to inspect other website to learn from others and maybe eventually save your life!