<h1>clamp()の使い方</h1>
<div id="container" class="container">
  <h2>コンテナー幅</h2>
  <p class="pixel">px<p>
</div>
h1{
  font-size: clamp(1.75rem, 1.6591rem + 0.4545vw, 2rem);
  text-align:center;
}
.container {
  width:clamp(18.75rem, -1.7045rem + 102.2727vw, 75rem);
  margin: 30px auto;
  background-color: yellow;
  padding: 100px 0;
  text-align:center;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  gap: 1rem;
}
View Compiled 
const container = document.getElementById("container");
const displayWidth = () => {
  const w = container.clientWidth;
  const child = document.querySelector(".pixel");
  child.innerHTML = `${w}px`;
}
window.addEventListener("load", displayWidth);
window.addEventListener("resize", displayWidth);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.