Ohjelmoijat eiv\u00e4t pid\u00e4 GUI (Graphic User Interface) -suunnittelusta. Siksi CSS (Cascade Style Sheet) ei ole heid\u00e4n juttunsa. Tiesin aina, ett\u00e4 \u00e4lypuhelimissa\/laitteissa, joissa n\u00e4yt\u00f6n (selaimen) leveys on pieni ja kapea, on katseluongelmia. T\u00e4m\u00e4 blogi oli t\u00e4ysin sekaisin ennen sit\u00e4 katsellessani Samsung Gallery S3 -\u00e4lypuhelimellani.<\/p>\n
T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 valitsin mallin, joka toimii parhaiten p\u00f6yt\u00e4koneille, joissa on leve\u00e4mpi n\u00e4ytt\u00f6. Minulla ei ollut aikaa enk\u00e4 halunnut muuttaa sit\u00e4 ennen kuin n\u00e4in k\u00e4yntitilastot Google Analyticissa. Ilmeisesti \u00e4lypuhelimista\/-laitteista tulevien vierailijoiden m\u00e4\u00e4r\u00e4 kasvaa merkitt\u00e4v\u00e4sti.<\/p>\n
WordPress tai ehk\u00e4 teemap\u00e4ivitys paransi paljon. Nyt, jos kavennat selaimen leveytt\u00e4 simuloidaksesi \u00e4lypuhelimia, voit n\u00e4hd\u00e4, ett\u00e4 sivu ei ole aivan huono, mutta se ei my\u00f6sk\u00e4\u00e4n ole t\u00e4ydellinen ja vaatii manuaalisia s\u00e4\u00e4t\u00f6j\u00e4.<\/p>\n
Joten mik\u00e4 on responsiivinen CSS? Sana responsiivinen tarkoittaa, ett\u00e4 mielest\u00e4ni CSS:\u00e4\u00e4 s\u00e4\u00e4det\u00e4\u00e4n eri tilanteiden mukaan (esim. n\u00e4yt\u00f6n leveys). Oletko huomannut, ett\u00e4 t\u00e4m\u00e4n sivun vasemmassa yl\u00e4kulmassa on pystysuora ty\u00f6kalurivi. Se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 leve\u00e4mm\u00e4ll\u00e4 leveydell\u00e4, mutta kapealla leveydell\u00e4 t\u00e4m\u00e4 romahtaa p\u00e4\u00e4sis\u00e4ll\u00f6n kanssa ja tekee siit\u00e4 todella ruman k\u00e4ytt\u00f6kokemuksen. P\u00e4\u00e4t\u00e4n piilottaa t\u00e4m\u00e4n, kun n\u00e4yt\u00f6n leveys on pieni.<\/p>\n
Joten seuraava on nopea aloituskohta reagoivalle CSS:lle.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nPohjimmiltaan yll\u00e4 oleva CSS m\u00e4\u00e4rittelee luokan<\/strong> yl\u00e4osan, ja toinen rivi tarkistaa, onko nykyisen sivun (selain, n\u00e4ytt\u00f6) leveys suurempi kuin 1100 pikseli\u00e4, jos ei, niin yl\u00e4p\u00e4\u00e4 m\u00e4\u00e4ritell\u00e4\u00e4n uudelleen piilotetuksi.<\/p>\nK\u00e4yt\u00e4 sit\u00e4 yksinkertaisesti sis\u00e4llytt\u00e4m\u00e4ll\u00e4 se n\u00e4in\u2026<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nNyt sinun ei tarvitse edes p\u00e4ivitt\u00e4\u00e4 sivua, CSS reagoi heti, kun n\u00e4yt\u00f6n leveys putoaa alle 1100 pikselin. Jos esimerkiksi katselet iPadilla ja k\u00e4\u00e4nn\u00e4t 90 astetta vaakasuuntaisesta pystysuoraan, CSS-koodi reagoi ja kuvakkeet piilotetaan.<\/p>\n