Responsive: unități, queries, variabile
rem vs px, mobile-first, container queries, clamp() și custom properties.
Actualizat
Ce înseamnă responsive
Responsive = același HTML arată bine pe un telefon de 360px și pe un monitor de 2560px. Nu faci două site-uri — faci un layout care se adaptează.
Trei unelte: unități flexibile, media / container queries și layout-uri fluide (flex, grid).
Unități — tipuri și când le folosești
| Unitate | Relativă la | Când |
|---|---|---|
px |
nimic (fix) | border-uri, umbre, detalii mici |
rem |
font-size-ul root (html, de obicei 16px) |
font-size, spațieri — respectă setarea de zoom a userului |
em |
font-size-ul elementului | padding care crește odată cu textul butonului |
% |
părinte | lățimi relative |
vw / vh |
fereastra | secțiuni full-screen |
dvh |
fereastra reală pe mobil (fără bara browserului) | min-height: 100dvh |
ch |
lățimea caracterului „0” | max-width: 65ch — rânduri lizibile |
Media queries
.grid { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
.grid { grid-template-columns: repeat(2, 1fr); }
}Mobile-first: scrii stilul pentru ecrane mici, apoi adaugi cu min-width. Codul e mai simplu și mobilul (majoritatea traficului) încarcă mai puțin CSS.
Alte media queries utile: (prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (hover: hover).
Container queries
Media queries privesc ecranul; container queries privesc părintele. Un card refolosit într-un sidebar îngust și într-o pagină lată se adaptează singur:
.card-wrapper { container-type: inline-size; }
@container (min-width: 30rem) {
.card { display: flex; }
}Tipografie fluidă cu clamp()
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }clamp(minim, preferat, maxim) — crește lin cu ecranul, dar nu iese din limite. Fără zeci de breakpoint-uri.
Variabile CSS (custom properties)
:root { --space: 1rem; --brand: #1f5fbf; }
.btn { padding: var(--space); background: var(--brand); }
@media (min-width: 64rem) {
:root { --space: 1.5rem; } /* toate spațierile cresc dintr-o singură linie */
}Spre deosebire de variabilele din Sass, cele CSS trăiesc în browser: se moștenesc, se pot schimba la runtime și în media queries. Pe ele se bazează temele din Tailwind.
Imagini responsive
img { max-width: 100%; height: auto; }next/image generează automat mai multe mărimi (srcset) și o alege pe cea potrivită ecranului.
Pe scurt
rempentru text și spațieri,pxpentru detalii,dvhpe mobil.- Mobile-first cu
min-width; container queries pentru componente. clamp()pentru tipografie fluidă, variabile CSS pentru tokens.