Wat is Container Query Units Calculator?
Container query units werken als viewport-eenheden maar zijn relatief aan een query-container in plaats van de viewport. cqi is 1% van de container inline-grootte, cqw is 1% van de containerbreedte, cqb is 1% van de container block-grootte, cqmin en cqmax zijn het min/max van cqi en cqb. Ze maken componentniveau responsieve formaatbepaling mogelijk waarbij een component zich aanpast aan zijn container, niet aan het browser venster.
Snel antwoord
Gebruik container query units (cqi, cqw, cqb, cqmin, cqmax) met clamp() voor componente niveau responsieve formaatbepaling. Ze werken als viewport-eenheden maar schalen met de breedte van de bovenliggende container. Stel container-type: inline-size in op de bovenliggende container en gebruik de clamp()-expressie in kind-stijlen.
Last updated: 2026-05-28
Beperkingen
- Container query units vereisen dat container-type is ingesteld op een voorouder. Zonder een gevestigde containercontext vallen ze terug naar viewport-gerelateerd gedrag, wat waarden veel groter dan bedoeld kan produceren.
- Browserondersteuning voor container query units komt overeen met container query-ondersteuning: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Oudere browsers herkennen deze eenheden helemaal niet.
- Wanneer er meerdere container-voorouders bestaan, wordt de dichtstbijzijnde voorouder met container-type gebruikt. Dit kan onverwacht gedrag veroorzaken als een diep genest component per ongeluk naar een dichterbijzijnde container verwijst.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de minimale en maximale doelgroottes voor uw CSS-eigenschap in pixels in.
- Stel het containerbreedtebereik in - de minimale containerbreedte waar de eigenschap zijn minimum bereikt, en de maximale breedte waar deze zijn maximum bereikt.
- Kies een container query unit en de CSS-eigenschapsnaam.
- Kopieer de clamp()-expressie en zorg ervoor dat het bovenliggende element container-type: inline-size heeft.
Waarvoor je het kunt gebruiken
- Laat een kaarttitel lettergrootte schalen met de kaartbreedte in plaats van de viewportbreedte.
- Maak een component padding die zich aanpast aan de beschikbare containerruimte.
- Bouw dashboard-widgets waarbij elk element proportioneel schaalt met de widget-container.