Ohjelmoijat eivät pidä GUI (Graphic User Interface) -suunnittelusta. Siksi CSS (Cascade Style Sheet) ei ole heidän juttunsa. Tiesin aina, että älypuhelimissa/laitteissa, joissa näytön (selaimen) leveys on pieni ja kapea, on katseluongelmia. Tämä blogi oli täysin sekaisin ennen sitä katsellessani Samsung Gallery S3 -älypuhelimellani.
Tämä johtuu siitä, että valitsin mallin, joka toimii parhaiten pöytäkoneille, joissa on leveämpi näyttö. Minulla ei ollut aikaa enkä halunnut muuttaa sitä ennen kuin näin käyntitilastot Google Analyticissa. Ilmeisesti älypuhelimista/-laitteista tulevien vierailijoiden määrä kasvaa merkittävästi.
WordPress tai ehkä teemapäivitys paransi paljon. Nyt, jos kavennat selaimen leveyttä simuloidaksesi älypuhelimia, voit nähdä, että sivu ei ole aivan huono, mutta se ei myöskään ole täydellinen ja vaatii manuaalisia säätöjä.
Joten mikä on responsiivinen CSS? Sana responsiivinen tarkoittaa, että mielestäni CSS:ää säädetään eri tilanteiden mukaan (esim. näytön leveys). Oletko huomannut, että tämän sivun vasemmassa yläkulmassa on pystysuora työkalurivi. Se näyttää hyvältä leveämmällä leveydellä, mutta kapealla leveydellä tämä romahtaa pääsisällön kanssa ja tekee siitä todella ruman käyttökokemuksen. Päätän piilottaa tämän, kun näytön leveys on pieni.
Joten seuraava on nopea aloituskohta reagoivalle CSS:lle.
Pohjimmiltaan yllä oleva CSS määrittelee luokan yläosan, ja toinen rivi tarkistaa, onko nykyisen sivun (selain, näyttö) leveys suurempi kuin 1100 pikseliä, jos ei, niin yläpää määritellään uudelleen piilotetuksi.
Käytä sitä yksinkertaisesti sisällyttämällä se näin…
Nyt sinun ei tarvitse edes päivittää sivua, CSS reagoi heti, kun näytön leveys putoaa alle 1100 pikselin. Jos esimerkiksi katselet iPadilla ja käännät 90 astetta vaakasuuntaisesta pystysuoraan, CSS-koodi reagoi ja kuvakkeet piilotetaan.