Saturday, April 27, 2024
HomeCSSjavascript - The way to convert unit into rem dynamically in css

javascript – The way to convert unit into rem dynamically in css


Hello i am dealing with the issue of changing unit into rem dynamically in css

  1. i’ll set root font-size as 23px
  2. my present font-size is 16px
  3. my anticipated outcome must be 16 / 23 => 0.695rem

Query: i wish to do that calculation in css 16 / 23 => 0.695rem which isn’t working

right here is how i attempted css:

   #im_p{
      font-size: calc(var(--im-p-font / 16)) rem;
    }

here’s what i’ve tried:

const root = doc.documentElement;

root.fashion.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-Suitable" content material="IE=edge">
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<physique>
    <p id="im_p">I am Paragraph<p>
</physique>
</html>

Notice: above code css is just not working

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments