PX vs REM vs EM etc
px
- border-width
- box-shadow
- text-shadow
- media queries
rem
- padding
- margin
- font-size
em
- Not used at the moment (possibly we should do media queries)
unitless
- line-height
sass
$html-font-size-default: 16;
// Px to Rem converter
@function rem-calc($size) {
$remSize: $size / $html-font-size-default;
@return #{$remSize}rem;
}
// Rem font size output with px fallback
@mixin font-size($size: $html-font-size-default) {
font-size: $size + px;
font-size: rem-calc($size);
}How to apply:
html {
@include font-size(16);
line-height: rem-calc(16);
}