Clamp — Glossário

A function constraining a value between a minimum and maximum, enabling fluid responsive typography and spacing.

Detalhe técnico

Clamps test viewport and device characteristics to conditionally apply styles. Level 4 features include range syntax (width >= 768px), prefers-color-scheme (dark mode), prefers-reduced-motion (accessibility), and hover capability detection. The mobile-first approach writes base styles for small screens and uses min-width queries for larger breakpoints. Container queries (@container) complement media queries by responding to parent element size rather than viewport size.

Exemplo

```css
/* Mobile-first: base styles for small screens */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 720px; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}
```

Ferramentas relacionadas

C CSS Minifier C CSS Beautifier C CSS Gradient Generator C CSS Box Shadow Generator C CSS Flexbox Generator C CSS Grid Generator C CSS Animation Generator C CSS Border Radius Generator C CSS Text Shadow Generator C CSS Transform Generator A Analisador de Sentimento de Publicação G Gerador de Emojis para Redes Sociais G Gerador de Biografias para Redes Sociais G Gerador de Lorem Ipsum G Gerador de Perfis de Usuário

Termos relacionados

Specificity Cascade Box Model Flexbox Grid Custom Property Media Query Pseudo-class Pseudo-element Transition Keyframe Animation Z-Index Container Query Selector Combinator BEM Viewport Unit Calc Aspect Ratio (CSS) Stacking Context Logical Property Color Function Nesting Layer Scroll Snap :has() Selector Subgrid Scroll-Driven Animation View Transition Anchor Positioning Popover oklch() lab() Custom Properties Inheritance CSS min() CSS max() CSS Scope Starting Style Color Mix Text Wrap Balance CSS Nesting Selector Content Visibility CSS Paint API Relative Color Syntax