Rakstu arhīvs
Responsīvs dizains nav viena tehnika — tā ir lēmumu virkne, kas ietekmē katru pikseļu katrā ierīcē.
Pamatjēdzieni
Šajā sadaļā apkopoti termini, kas regulāri parādās responsīvā dizaina kontekstā. Precīza terminoloģija palīdz lasīt specifikācijas un saprast koda komentārus bez pārpratumiem.
-
- Šķidrais izkārtojums
- Izkārtojums, kurā platumi izteikti procentos, nevis fiksētos pikseļos. Elements aizņem noteiktu daļu no vecāka platuma neatkarīgi no ekrāna izšķirtspējas.
- Breakpoint
- CSS media vaicājumā norādīta vērtība, pie kuras mainās izkārtojums. Parasti atbilst bieži sastopamiem ekrāna platumiem — 600 px, 900 px, 1200 px.
- Viewport meta tags
- HTML meta tags, kas pārlūkam norāda, kā interpretēt lapas platumu mobilajās ierīcēs. Bez tā CSS media vaicājumi nedarbojas paredzētajā veidā.
- Flexbox un Grid
- Divi CSS izkārtojuma mehānismi ar atšķirīgu loģiku. Flexbox vislabāk strādā vienas ass gadījumos; Grid — divdimensiju izkārtojumiem ar skaidri definētiem rindas un kolonnas leņķiem.
Materiālu kolekcija
Šeit apkopoti raksti, kas aptver responsīvā dizaina tehniskos aspektus — no CSS struktūras līdz testēšanas metodēm reālās ierīcēs.
Media vaicājumu rakstīšanas kārtība
Mobile-first pieeja nozīmē, ka bāzes stili attiecas uz mazākajiem ekrāniem, un media vaicājumi paplašina izkārtojumu augšup. Šis raksts aplūko, kāpēc secībai ir nozīme kaskādes kontekstā.
Lasīt analīzēŠķidrā tipografija ar clamp()
CSS funkcija clamp() ļauj definēt minimālo, optimālo un maksimālo fonta lielumu vienā rindiņā. Bez breakpointiem, bez JavaScript — tikai matemātika un skatvairas platums.
srcset un sizes atribūtu loģika
Pārlūks pats izvēlas piemērotāko attēla versiju, ja pareizi norādīts srcset un sizes. Raksts izskaidro lēmumu pieņemšanas algoritmu un biežākās kļūdas implementācijā.
Kā testēt bez fiziskām ierīcēm
Pārlūka DevTools piedāvā ierīču emulāciju, taču tā neaizvieto testēšanu uz reāla ekrāna ar reālu pirkstu. Raksts apraksta minimālo testēšanas kopu ar pieejamiem rīkiem.
Lasīt analīzēKonteineru vaicājumi: kad un kāpēc
Konteineru vaicājumi reaģē uz vecākelementa platumu, nevis skatvairi. Liels uzlabojums gadījumos, kad viens komponents tiek izmantots dažādos kontekstos ar atšķirīgu platumu.
Lasīt analīzēFokusa pārvaldība mobilajā skatā
Slēpta navigācija vai sabrukuši paneļi rada fokusa pārvaldības problēmas ekrānlasītāju lietotājiem. Šis raksts aplūko konkrētus scenārijus un to risinājumus ar tīru CSS.
Lasīt analīzē