Responzivnost

Viewport

Viewport se definira kao prostor na web stranici koji je vidljiv korisniku. Unutar koda, viewport označava veličinu uređaja na kojemu se stranica pregledava.
Standardno postavljanje viewporta na stranici:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width -> usklađuje širinu stranice sa širinom uređaja
• initial-scale=1.0 -> postavlja razinu uvećanja (zooma) sadržaja

Struktura rešetke

Struktura rešetke, poznatija pod engleskim nazivom nazivom „grid layout“, označava način na koji se poredavaju elementi na web stranici. Sastoji se od uzastopnih paralelnih i okomitih linija koje su jednako razmaknute jedna od druge, te od prostora između – kako nebi došlo do međusobnog „lupanja“ elemenata.

Tekst

Najjednostavniji način izrade responzivnog teksta jest zamjena mjerne jedinice (npr. px [pikseli]) s mjernom jedinicom vw – viewport width. Ova mjerna jedinica označava postotak širine uređaja, npr. 2vw stoji za 2% širine uređaja.

Multimedijski sadržaji

Kako bismo primjenili pojam responzivnost na multimedijske sadržaje, kao na primjer videozapise i slike, najlakše nam je pod svojstvo width samog elementa staviti postotak umjesto fiksne vrijednosti.

Korisna svojstva koja vrijedi napomenuti su max-width i min-width. Ona ograničuju veličinu multimedije kako nebi bila prevelika ili premala.

Media query

Uz pomoć media queryja možemo, ovisno o veličini uređaja ili preglednika, definirati u potpunosti drukčiji izgled i poredak sadržaja web stranice putem CSS-a.
Ovo se radi pomoću CSS pravila (eng. rule) @media.

Standardna sintaksa:
@media only screen and (max-width: 600px) {
...
}

• CSS oblikovanje se prikazuje samo na uređajima kojima je najveća širina preglednika 600 piksela.