Programmeerijatele ei meeldi GUI (graafiline kasutajaliides) disain. Seetõttu pole CSS (Cascade Style Sheet) nende asi. Teadsin alati, et nutitelefonides/seadmetes, kus ekraani (brauseri) laius on väike ja kitsas, on vaatamisega probleeme. See blogi oli enne minu Samsung Gallery S3 nutitelefoniga vaatamist täielikus segaduses.
Seda seetõttu, et valisin malli, mis sobib kõige paremini laiema ekraaniga lauaarvutite jaoks. Mul ei olnud aega ega tahtnud seda muuta enne, kui nägin Google Analyticus külastusstatistikat. Ilmselt kasvab see arv märkimisväärselt nutitelefonidest/seadmetest pärit külastajate osas.
WordPress või võib-olla teema uuendamine paranes palju. Kui nüüd nutitelefonide simuleerimiseks brauseri laiust kitsendada, näete, et leht pole päris halb, kuid pole ka täiuslik ja nõuab käsitsi reguleerimist.
Niisiis, mis on tundlik CSS? Sõna reageeriv tähendab, et minu arvates kohandatakse CSS-i vastavalt erinevatele olukordadele (nt ekraani laius). Kas olete märganud, et selle lehe vasakus ülanurgas on vertikaalne tööriistariba. See näeb hea välja laiemas laiuses, kuid kitsas laiuses vajub see põhisisuga kokku ja muudab selle kasutajakogemuse tõeliselt koledaks. Otsustan selle peita, kui ekraani laius on väike.
Nii et järgmine on kiire lähtepunkt tundlikule CSS-ile.
Põhimõtteliselt määratleb ülaltoodud CSS klassi ülaosa ja teine rida kontrollib, kas praeguse lehe (brauser, ekraan) laius on suurem kui 1100 pikslit, kui mitte, siis määratletakse ülaosa uuesti peidetuks.
Selle kasutamiseks lisage see lihtsalt nii…
Nüüd ei pea te isegi lehte värskendama, CSS reageerib kohe, kui ekraani laius langeb alla 1100 piksli. Näiteks kui vaatate iPadis ja pöörate horisontaalselt vertikaalselt 90 kraadi, reageerib CSS-kood ja ikoonid peidetakse.