Programi\u015bci nie lubi\u0105 projektowania GUI (Graphic User Interface). Dlatego CSS (Cascade Style Sheet) to nie ich rzecz. Zawsze wiedzia\u0142em, \u017ce na smartfonach\/urz\u0105dzeniach, gdzie szeroko\u015b\u0107 ekranu (przegl\u0105darki) jest ma\u0142a i w\u0105ska, wyst\u0119puj\u0105 problemy z wy\u015bwietlaniem. Ten blog by\u0142 wcze\u015bniej w totalnym ba\u0142aganie podczas przegl\u0105dania na moim smartfonie Samsung Gallery S3.<\/p>\n
To dlatego, \u017ce wybra\u0142em szablon, kt\u00f3ry najlepiej sprawdza si\u0119 na komputerach z szerszymi ekranami. Nie mia\u0142em czasu i nie chcia\u0142em tego zmienia\u0107, dop\u00f3ki nie zobaczy\u0142em statystyk odwiedzin w Google Analytic. Najwyra\u017aniej liczba ta znacznie ro\u015bnie w przypadku odwiedzaj\u0105cych korzystaj\u0105cych ze smartfon\u00f3w\/urz\u0105dze\u0144.<\/p>\n
WordPress lub mo\u017ce aktualizacja motywu znacznie si\u0119 poprawi\u0142a. Teraz, je\u015bli zaw\u0119zisz szeroko\u015b\u0107 przegl\u0105darki, aby symulowa\u0107 smartfony, zobaczysz, \u017ce strona nie jest ca\u0142kiem z\u0142a, ale te\u017c nie jest idealna i wymaga r\u0119cznych korekt.<\/p>\n
Czym wi\u0119c jest responsywny CSS? S\u0142owo responsywny oznacza, \u017ce \u200b\u200bmoim zdaniem CSS b\u0119dzie dostosowywany do r\u00f3\u017cnych sytuacji (np. szeroko\u015b\u0107 ekranu). Czy zauwa\u017cy\u0142e\u015b, \u017ce w lewym g\u00f3rnym rogu tej strony znajduje si\u0119 pionowy pasek narz\u0119dzi. Wygl\u0105da dobrze, gdy w szerszej szeroko\u015bci, jednak w w\u0105skim, spowoduje to zwini\u0119cie si\u0119 z g\u0142\u00f3wn\u0105 tre\u015bci\u0105 i sprawi, \u017ce b\u0119dzie to naprawd\u0119 brzydkie wra\u017cenia u\u017cytkownika. Postanawiam to ukry\u0107, gdy szeroko\u015b\u0107 ekranu jest niewielka.<\/p>\n
Tak wi\u0119c poni\u017csze jest szybkim punktem wyj\u015bcia do responsywnego CSS.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nZasadniczo powy\u017cszy CSS definiuje klas\u0119<\/strong> topleft, a druga linia sprawdzi, czy szeroko\u015b\u0107 bie\u017c\u0105cej strony (przegl\u0105darki, ekranu) jest wi\u0119ksza ni\u017c 1100 pikseli, je\u015bli nie, to topleft zostanie przedefiniowany jako ukryty.<\/p>\nAby z niego skorzysta\u0107, po prostu do\u0142\u0105cz to w ten spos\u00f3b\u2026<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nTeraz nie musisz nawet od\u015bwie\u017ca\u0107 strony, CSS zareaguje natychmiast, gdy szeroko\u015b\u0107 ekranu spadnie poni\u017cej 1100px. Na przyk\u0142ad, je\u015bli ogl\u0105dasz na iPadzie i obr\u00f3cisz si\u0119 o 90 stopni z poziomego do pionowego, kod CSS b\u0119dzie responsywny, a ikony zostan\u0105 ukryte.<\/p>\n