Typographie fluide avec clamp()
HTML
index.html <main>
<h1>clamp() fluid typography</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati harum fugiat tempora corporis quod maiores beatae vitae earum hic quae laborum cum quam libero laboriosam esse omnis, neque magni recusandae!</p>
<h2>clamp() fluid typography</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati harum fugiat tempora corporis quod maiores beatae vitae earum hic quae laborum cum quam libero laboriosam esse omnis, neque magni recusandae!</p>
<h3>clamp() fluid typography</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati harum fugiat tempora corporis quod maiores beatae vitae earum hic quae laborum cum quam libero laboriosam esse omnis, neque magni recusandae!</p>
</main>
CSS
style.css @layer demo {
h1 {
font-size: clamp(2rem, 8vw, 5rem);
}
h2 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
h3 {
font-size: clamp(1.2rem, 3vw, 2.5rem);
}
p {
font-size: clamp(1rem, 2vw, 1.5rem);
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
}
main {
width: 50vw;
display: flex;
flex-direction: column;
gap: 1rem;
}
}