<body>
  <div>
    <div>
      <span>Screen size:</span>
      <span id="screen-size"></span>
    </div>
    <div>
      <span>Font size:</span>
      <span id="font-size"></span>
    </div>
  </div>
  <p>I'm using clamp</p>
</body>
:root{
  --fs-1: clamp(1rem, 5vw, 2rem);
}

p{
  font-size: var(--fs-1);
  line-height: 1.5;
}



/*Styling unrelated to the example*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html{
  height: 100%;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  
  color: #222222;
  
  font-family: 'Ubuntu', sans-serif;
  
  /*https://www.magicpattern.design/tools/css-backgrounds*/
  background-color: #DBDBDB;
  opacity: 1;
  background-image:  radial-gradient(#999999 1.4000000000000001px, transparent 1.4000000000000001px), radial-gradient(#999999 1.4000000000000001px, #DBDBDB 1.4000000000000001px);
  background-size: 56px 56px;
  background-position: 0 0,28px 28px;
}

body > div{
  position: absolute;
  
  top: 2vw;
  left: 2vw;
}

body > div > div{
  padding: .5rem 1rem;
  background-color: #EDEDED;
}

body > div > div:first-child{
  margin-bottom: .5rem
}

span{
  font-size: 1.25rem;
}


const body = document.querySelector("body");
const text = document.querySelector("p");
const screenSizeField = document.querySelector("#screen-size");
const fontSizeField = document.querySelector("#font-size");

screenSizeField.innerText = body.offsetWidth+"px";
fontSizeField.innerText = window.getComputedStyle(text).getPropertyValue("font-size");

addEventListener("resize", () => {
  const screenSize = body.offsetWidth;
  const fontSize = window.getComputedStyle(text).getPropertyValue("font-size");
  
  screenSizeField.innerText = screenSize+"px";
  fontSizeField.innerText = fontSize;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.