Media Queries CSS Ghid Rapid
In this tutorial, you'll learn about Media Queries CSS Ghid Rapid. We cover key concepts, practical examples, and best practices.
Vei învăța cum să scrii media queries CSS pentru a crea layout-uri responsive care se adaptează la diferite dimensiuni de ecran și preferințe ale utilizatorului.
Problema
Un site care arată bine pe desktop poate fi ilizibil pe telefon sau tabletă. Fără media queries, elementele nu se reașază, fonturile rămân prea mici sau prea mari, iar experiența utilizatorului are de suferit. Media queries permit aplicarea de stiluri condiționate pe baza caracteristicilor dispozitivului.
Rezolvare rapidă
Pasul 1: Adaugă meta viewport în HTML
<!-- Greșit — fără viewport meta, media queries nu funcționează corect -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Rezultat: Browserul raportează lățimea reală a dispozitivului, nu o lățime缩放ată.
Pasul 2: Folosește min-width pentru mobile-first
/* Stiluri de bază (mobile) */
.container {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Greșit — desktop-first cu max-width */
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
}
/* Corect — mobile-first cu min-width */
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
Rezultat: Stilurile mobile sunt implicite; ecranele mai mari primesc progresiv mai multe coloane.
Pasul 3: Combină condiții multiple
/* Tablete landscape și ecrane mai mari */
@media (min-width: 768px) and (max-width: 1024px) {
.sidebar {
width: 250px;
}
}
/* Ecrane cu densitate mare (Retina) */
@media (min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
}
}
/* Ecrane mici în landscape */
@media (max-height: 500px) and (orientation: landscape) {
.header {
position: static;
}
}
Rezultat: Stiluri precise pentru combinații specifice de dispozitive.
Pasul 4: Folosește prefers-color-scheme pentru modul întunecat
/* Stil implicit (light) */
body {
background: #fff;
color: #222;
}
/* Greșit — implementare manuală cu clase JavaScript */
/* Corect — media query nativ */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a2e;
color: #e0e0e0;
}
a {
color: #bb86fc;
}
}
Rezultat: Tema se adaptează automat la preferințele sistemului de operare.
Pasul 5: prefers-reduced-motion pentru accesibilitate
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Rezultat: Utilizatorii cu sensibilitate la mișcare nu sunt afectați de animații.
Prevenire
- Adoptă abordarea mobile-first (min-width)
- Grupează media queries la sfârșitul fișierului sau lângă componente
- Testează pe dispozitive reale, nu doar în DevTools
- Folosește breakpoint-uri standard: 576px, 768px, 992px, 1200px
Greșeli comune
- Uitarea meta viewport — Fără
<meta name="viewport">, media queries nu funcționează pe mobile. - Desktop-first cu max-width — Duce la cod mai complex și override-uri inutile.
- Prea multe breakpoint-uri — 3-4 breakpoint-uri sunt suficiente pentru majoritatea proiectelor.
- Testarea doar în DevTools — Comportamentul pe dispozitive reale poate diferi.
- Ignorarea preferințelor utilizatorului —
prefers-color-schemeșiprefers-reduced-motionîmbunătățesc accesibilitatea.
Exercițiu
Creează un layout cu 3 coloane pe desktop, 2 coloane pe tabletă și 1 coloană pe mobil. Adaugă suport pentru modul întunecat și reducerea mișcării. Testează în DevTools pe diferite dimensiuni.
Întrebări frecvente
Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro