Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues.
- I have set the root font-size as 23px
- The current font-size is 16px
- The expected result should be
16 / 23 => 0.695rem
Question: I am looking for a way to perform this calculation in CSS - 16 / 23 => 0.695rem, however, it is not working correctly.
This is how I attempted to implement it using CSS:
#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}
Here's what I have tried so far:
const root = document.documentElement;
root.style.setProperty('--im-p-font',23);#im_p{
font-size: calc(var(--im-p-font / 16)) rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Document</title>
</head>
<body>
<p id="im_p">I'm Paragraph<p>
</body>
</html>Note: The above CSS code snippet is not functioning as expected.