Let's talk about units
There is a life beyond pixels and percentages. Using
px units is fine in certain cases, the real mistake is using absolute instead of relative units.
What is the problem and how to fix it
- Using relative units ensures that the website scales proportionally according to your choice of font, and according to the users' choice of screen size and zoom level.
- The formula to calculate the rem value is
desired-size / root-font-size, in short
8 / 16 = 0.5, this means that
1remequals the font size of the
htmlelement (which for most browsers has a default value of 16px).
- If you don't want to grab a calculator every time you need a new unit, use Sass and create mixin. CSS Tricks has a pretty good article about how you can achive this.