11. Responsīvais dizains

Responsīvais dizains nodrošina, ka mājas lapa labi izskatās un darbojas uz jebkuras ierīces — no liela datora ekrāna līdz mazam telefonam. CSS piedāvā vairākus rīkus šī mērķa sasniegšanai.

Viewport meta tags

Lai responsīvais dizains darbotos, HTML dokumentā obligāti jābūt šim meta tagam:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media queries

Media queries ļauj piemērot dažādus CSS stilus atkarībā no ekrāna izmēra:

/* Stili visiem ekrāniem */
.konteiners {
padding: 20px;
}

/* Ja ekrāns ir šaurāks par 768px (planšetes, telefoni) */
@media (max-width: 768px) {
.konteiners {
padding: 10px;
}
}

/* Ja ekrāns ir šaurāks par 480px (telefoni) */
@media (max-width: 480px) {
.konteiners {
padding: 5px;
}
}

Populārākie breakpoint izmēri

Mobile-first pieeja

Ieteicams veidot stilus vispirms mobilajām ierīcēm, tad pievienot stilus lielākiem ekrāniem ar min-width:

/* Mobilā versija (noklusējums) */
.nav-links {
flex-direction: column;
}

/* Datoriem */
@media (min-width: 768px) {
.nav-links {
flex-direction: row;
}
}

Elastīgi izmēri

Izmanto procentuālās vērtības un elastīgās mērvienības, lai saturs pielāgotos ekrānam:

.konteiners {
width: 100%; /* aizņem visu pieejamo platumu */
max-width: 1200px; /* bet ne vairāk par 1200px */
margin: 0 auto; /* centrēts */
}

img {
max-width: 100%; /* attēls nekad nepārsniedz konteineru */
height: auto; /* saglabā proporcijas */
}

Responsīvs teksts

/* clamp(minimums, ideālais, maksimums) */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}

body {
font-size: clamp(0.9rem, 2vw, 1.1rem);
}

clamp() funkcija automātiski pielāgo teksta izmēru ekrāna platumam starp noteiktām robežām.

Responsīvs izkārtojums ar Grid

.kartites {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

Šis viens noteikums izveido pilnībā responsīvu kartīšu režģi bez media queries — kolonnu skaits automātiski mainās atkarībā no ekrāna platuma.

Elementu slēpšana

/* Rādīt tikai uz datoriem */
.tikai-datoriem {
display: none;
}
@media (min-width: 768px) {
.tikai-datoriem { display: block; }
}

/* Rādīt tikai uz mobilajiem */
@media (min-width: 768px) {
.tikai-mobilais { display: none; }
}