Beispiel:Container-cqb.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Container Query Units - cqb and cqh</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #f5f5f5;
font-family: sans-serif;
}
.wrapper {
resize: vertical;
overflow: auto;
width: 100%;
max-width: 45em;
height: 20em;;
min-height: 12em;
border: thin dashed #ccc;
padding: 1rem;
}
.card {
container-type: size;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4cqh;
background: white;
border-radius: 1rem;
padding: 1rem;
}
.card-icon {
width: 25cqh;
height: 25cqh;
display: grid;
place-items: center;
background: royalblue;
color: white;
border-radius: 50%;
font-size: 15cqh;
}
.card h2 {
margin: 0;
font-size: 8cqb;
line-height: 1.1;
}
.card p {
margin: 0;
font-size: 5cqb;
color: #666;
text-align: center;
}
</style> </head>
<body>
<article class="card">
Überschrift
Ändere die Höhe des Containers → alles wird entsprechend skaliert.
</article>
</body> </html>
