Largeur de conteneur avec clamp()
HTML
index.html <h1 class='title'>clamp() for container</h1>
<div class='container'>
<p class='resize'>Resize the viewport and watch the width change</p>
<div class='viewport-container'>
<p class="viewport"></p>
</div>
<div class="rect">
<p class='width'></p>
</div>
<p class="clamp">width: clamp(250px, 50vw, 600px);</p>
</div>
CSS
style.css @layer demo {
.rect {
width: clamp(250px, 50vw, 600px);
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
}
.container {
display: flex;
flex-direction: column;
text-align: center;
gap: 2rem;
height: 88vh;
width: calc(100vw - 24px);
align-items: center;
font-size: 1.5rem;
}
.resize {
color: #888;
}
.viewport-container {
--color-blue: 20 111 194;
padding: 1rem;
border-radius: 15px;
background: rgba(var(--color-blue) / 30%);
backdrop-filter: blur(2.2px);
border: 1px solid rgba(var(--color-blue) / 100%);
}
.rect {
--color-red: 194 20 79;
padding: 1rem;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
border-radius: 15px;
background: rgba(var(--color-red) / 30%);
backdrop-filter: blur(2.2px);
border: 1px solid rgba(var(--color-red) / 100%);
}
}
JavaScript
script.js const rect = document.querySelector(".rect");
const text = document.querySelector(".width");
const viewport = document.querySelector(".viewport");
const rectStyle = window.getComputedStyle(rect);
const setSize = () => {
text.textContent = `width: ${parseInt(rectStyle.width).toFixed(0)}px`;
viewport.textContent = `viewport: ${window.innerWidth}px`;
};
setSize();
window.addEventListener("resize", function () {
setSize();
});