Programiści nie lubią projektowania GUI (Graphic User Interface). Dlatego CSS (Cascade Style Sheet) to nie ich rzecz. Zawsze wiedziałem, że na smartfonach/urządzeniach, gdzie szerokość ekranu (przeglądarki) jest mała i wąska, występują problemy z wyświetlaniem. Ten blog był wcześniej w totalnym bałaganie podczas przeglądania na moim smartfonie Samsung Gallery S3.
To dlatego, że wybrałem szablon, który najlepiej sprawdza się na komputerach z szerszymi ekranami. Nie miałem czasu i nie chciałem tego zmieniać, dopóki nie zobaczyłem statystyk odwiedzin w Google Analytic. Najwyraźniej liczba ta znacznie rośnie w przypadku odwiedzających korzystających ze smartfonów/urządzeń.
WordPress lub może aktualizacja motywu znacznie się poprawiła. Teraz, jeśli zawęzisz szerokość przeglądarki, aby symulować smartfony, zobaczysz, że strona nie jest całkiem zła, ale też nie jest idealna i wymaga ręcznych korekt.
Czym więc jest responsywny CSS? Słowo responsywny oznacza, że moim zdaniem CSS będzie dostosowywany do różnych sytuacji (np. szerokość ekranu). Czy zauważyłeś, że w lewym górnym rogu tej strony znajduje się pionowy pasek narzędzi. Wygląda dobrze, gdy w szerszej szerokości, jednak w wąskim, spowoduje to zwinięcie się z główną treścią i sprawi, że będzie to naprawdę brzydkie wrażenia użytkownika. Postanawiam to ukryć, gdy szerokość ekranu jest niewielka.
Tak więc poniższe jest szybkim punktem wyjścia do responsywnego CSS.
Zasadniczo powyższy CSS definiuje klasę topleft, a druga linia sprawdzi, czy szerokość bieżącej strony (przeglądarki, ekranu) jest większa niż 1100 pikseli, jeśli nie, to topleft zostanie przedefiniowany jako ukryty.
Aby z niego skorzystać, po prostu dołącz to w ten sposób…
Teraz nie musisz nawet odświeżać strony, CSS zareaguje natychmiast, gdy szerokość ekranu spadnie poniżej 1100px. Na przykład, jeśli oglądasz na iPadzie i obrócisz się o 90 stopni z poziomego do pionowego, kod CSS będzie responsywny, a ikony zostaną ukryte.