The rem function for CSS contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.
If the A value and the B step are on opposite sides of zero: rem() (short for "remainder") chooses the integer multiple of B that puts the value between zero and -B.
<rem()> =
rem(
<calc-sum>,
<calc-sum>
) <calc-sum> =
<calc-product>
[ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value>
[ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<dimension> A number with a unit.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN e The base of the natural logarithm, approximately equal to 2.7182818284590452354.
pi The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.
infinity Positive infinity.
-infinity Negative infinity.
<!doctype html>
<html>
<head>
<style>
:root
{
--myvar1: 50%;
--myvar2: rem(50% + 10px, 40%);
--myvar3: rem(50% + 10px, 30%);
--myvar4: rem(50% + 10px, 20%);
--myvar5: rem(50% + 10px, 10%);
}
div
{
background-image: linear-gradient(135deg, white, lightgray);
height: 100px;
}
div:nth-of-type(1)
{
width: var(--myvar1);
}
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar2);
}
div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar3);
}
div:nth-of-type(4)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar4);
}
div:nth-of-type(5)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar5);
}
</style>
</head>
<body>
<div>+</div>
<div>+</div>
<div>+</div>
<div>+</div>
<div>+</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
:root
{
--myvar1: 50%;
--myvar2: rem(50% - 10px, 40%);
--myvar3: rem(50% - 10px, 30%);
--myvar4: rem(50% - 10px, 20%);
--myvar5: rem(50% - 10px, 10%);
}
div
{
background-image: linear-gradient(135deg, white, lightgray);
height: 100px;
}
div:nth-of-type(1)
{
width: var(--myvar1);
}
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar2);
}
div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar3);
}
div:nth-of-type(4)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar4);
}
div:nth-of-type(5)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar5);
}
</style>
</head>
<body>
<div>-</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>-</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
:root
{
--myvar1: 50%;
--myvar2: rem(50% * 10, 40%);
--myvar3: rem(50% * 10, 30%);
--myvar4: rem(50% * 10, 20%);
--myvar5: rem(50% * 10, 10%);
}
div
{
background-image: linear-gradient(135deg, white, lightgray);
height: 100px;
}
div:nth-of-type(1)
{
width: var(--myvar1);
}
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar2);
}
div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar3);
}
div:nth-of-type(4)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar4);
}
div:nth-of-type(5)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar5);
}
</style>
</head>
<body>
<div>*</div>
<div>*</div>
<div>*</div>
<div>*</div>
<div>*</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
:root
{
--myvar1: 50%;
--myvar2: rem(50% / 10, 40%);
--myvar3: rem(50% / 10, 30%);
--myvar4: rem(50% / 10, 20%);
--myvar5: rem(50% / 10, 10%);
}
div
{
background-image: linear-gradient(135deg, white, lightgray);
height: 100px;
}
div:nth-of-type(1)
{
width: var(--myvar1);
}
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar2);
}
div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar3);
}
div:nth-of-type(4)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar4);
}
div:nth-of-type(5)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar5);
}
</style>
</head>
<body>
<div>/</div>
<div>/</div>
<div>/</div>
<div>/</div>
<div>/</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
:root
{
--myvar1: 50%;
}
div
{
background-image: linear-gradient(135deg, white, lightgray);
height: 100px;
}
div:nth-of-type(1)
{
width: var(--myvar1);
}
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar2);
}
div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar3);
}
div:nth-of-type(4)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar4);
}
div:nth-of-type(5)
{
background-image: linear-gradient(135deg, white, yellow);
width: var(--myvar5);
}
</style>
</head>
<body>
<button>initial</button>
<button value=" ">remainder</button>
<button value=" + 10px">+</button>
<button value=" - 10px">-</button>
<button value=" * 10">*</button>
<button value=" / 10">/</button>
<div>rem</div>
<div>rem</div>
<div>rem</div>
<div>rem</div>
<div>rem</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
const mystyle = document.querySelector(":root").style;
mystyle.setProperty('--myvar2', 'rem(50%' + myproperty + ', 40%)');
mystyle.setProperty('--myvar3', 'rem(50%' + myproperty + ', 30%)');
mystyle.setProperty('--myvar4', 'rem(50%' + myproperty + ', 20%)');
mystyle.setProperty('--myvar5', 'rem(50%' + myproperty + ', 10%)');
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>