Everything You Need To Know About EM & REM

Convert Into EM/REM

EM

With base value :- 16px

.parent-div {
font-size: 16px
}
.parent-div .child-div {
padding: 2em; /*32px*/
height: 5em; /*80px*/
width: 5em; /*80px*/
margin-bottom: 1em; /*16px*/
border-radius: 2em; /*32px*/
}

When you reduce 4px from the Parent-div value

changed base value :- 12px

.parent-div {
font-size: 12px
}
.parent-div .child-div {
padding: 2em; /*24px)*/
height: 5em; /*60px)*/
width: 5em; /*60px)*/
margin-bottom: 1em; /*12px)*/
border-radius: 2em; /*24px)*/
}

REM

With base value :- 16px

When you reduce 4px from the base value

changed base value :- 12px

.parent-div {
font-size: 1rem
}

.parent-div .child-div {
padding: 2rem; /*32px*/
height: 5rem; /*80px*/
width: 5rem; /*80px*/
margin-bottom: 1rem; /*16px*/
border-radius: 2rem; /*32px*/
}

If you have some values in EM, then check here.

.parent-div {
font-size: 16px
}

.parent-div .child-div {
padding: 2rem; /*24px*/
height: 5rem; /*60px*/
width: 5rem; /*60px*/
margin-bottom: 1rem; /*12px*/
border-radius: 2rem; /*24px*/
}

Base Value In Percentage

$base: 16px;
// PX to REM
@function rem($target, $context: $base) {
@return decimal-ceil($target / $context)+0rem;
}

// PX to EM
@function em($target, $context: $base) {
@return decimal-ceil($target / $context)+0em;
}

// Heading font family
$h1-size: rem(52px) !default;
$h2-size: rem(42px) !default;

@include respond-below(md) {
font-size: $h1-size / 1.5;
}
}

@include respond-below(md) {
font-size: $h2-size / 1.5;
}
}

$hgroup-margin-bottom: rem(15px) !default;

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ZealousWeb

ZealousWeb

92 Followers

Helping businesses Solve The Unsolved with a tech-first approach to expedite digital transformation.