Esittely eri näyttöjen mukauttamiseen CSS:ssä

Nykyään verkkosivun tulee näyttää hyvältä laitteilla, joilla on erikokoiset näytöt.

Yleensä laitteet jaotellaan neljään luokkaan: tietokoneet (desktop), kannettavat tietokoneet, tabletit (tablet) ja puhelimet (mobile).

Ennen, vanhoina aikoina, olivat tunnetut suosittujen laitteiden näytön koot, onneksi niitä ei ollut niin paljon. Ja verkkosivut tehtiin siten, että ne näyttäytyivät oikein tunnetuilla resoluutioilla.

Nykyään laitteita on tullut niin paljon, että on mahdotonta laatia luetteloa resoluutioista, joiden alle verkkosivun tulee tehdä. Nykyään oletetaan, että verkkosivun ulkoasun tulee näyttää oikein millä tahansa näytön koolla.

Tämä saavutetaan järjestämällä lohkot uudelleen asettelun avainpisteissä. Samalla nämä avainpisteet valitaan ei tietyille laitteille, vaan verkkosivun sisällön mukaan - niin, että se näyttää hyvältä.

Avainpisteiden välissä elementtien leveyden tulee olla liukuvaa, jotta se sopeutuu näytön leveyteen. Ja avainpisteissä tapahtuu lohkojen uudelleenjärjestely toisiin sijainteihin.

Kuvattua verkkosivun suunnittelua kutsutaan responsiiviseksi tai mukautuvaksi (responsive). Sen opiskeluun me ryhdymme seuraavissa oppitunneissa.