Responsywny projekt witryny WordPress nie jest już opcjonalny-jest koniecznością. Przynajmniej jest to według zaktualizowanego algorytmu Google, który karze witryny, które nie są w pełni zoptymalizowane pod kątem urządzeń mobilnych.

A aktualizacja algorytmu Google ma sens. Według comScore, mobile stał się wiodącą platformą cyfrową, a całkowita aktywność na smartfonach i tabletach stanowi 60% czasu mediów cyfrowych spędzonego w USA.

Korzystając z CSS3, możesz zaktualizować swoją witrynę, aby była responsywna. W przeciwieństwie do innych metod, takich jak Bootstrap, CSS3 jest mniej skomplikowany i dużo łatwiejszy do nauczenia się i wdrożenia, ale ponieważ istnieje również CSS w Bootstrap, jest to świetny język stylizacji do nauki lub odświeżenia zarówno dla początkujących, jak i profesjonalistów.

W tym poście omówimy kroki, które musisz podjąć, aby Twoja strona była responsywna za pomocą CSS3.

Responsive vs Mobile-Friendly

Terminy ” responsywny “i” przyjazny dla urządzeń mobilnych ” są często używane zamiennie podczas opisywania witryny, ale ważne jest, aby zrozumieć, co tak naprawdę oznaczają oba słowa, aby upewnić się, że witryna spełnia niezbędne wymagania potrzebne do świetnego wyglądu na wszystkich urządzeniach.

Oczywiście, responsywny projekt z definicji różni się od projektu przyjaznego dla urządzeń mobilnych.

W pełni responsive design idealnie pasuje do mniejszego ekranu i ma ikony, obrazy i inne elementy, które są wielkości, dzięki czemu są łatwe do zobaczenia i użycia po dotknięciu ich.

Slack's mobile site.
Witryna responsywna może wygodnie wyświetlać zawartość na mniejszym ekranie.

Przyjazny dla urządzeń mobilnych z drugiej strony witryny ledwo spełniają wymagania wyświetlania na ekranach mobilnych. Oznacza to również, że nie reagują.

Na przykład witrynę można uznać za przyjazną dla urządzeń mobilnych, gdy nie trzeba przewijać w lewo i w prawo, aby wyświetlić całą zawartość, ale oznacza to również, że cała strona i jej zawartość kurczą się, aby tak się stało.

Zawartość staje się nieczytelna, chyba że uszczypniesz ekran dotykowy, aby powiększyć stronę i jej zawartość.

A mobile-friendly page with tiny text and links.
Witryna nie musi być przyjazna dla użytkownika, aby można ją było nazwać przyjazną dla urządzeń mobilnych.

Witryny, które nie są responsywne ani przyjazne dla urządzeń mobilnych, wyświetlają standardową witrynę na wszystkich urządzeniach mobilnych.

Na mniejszych ekranach musisz przewijać w lewo i w prawo, aby przeczytać całą zawartość strony, ponieważ nie wszystkie mieszczą się na ekranie. Tego typu witryny są trudne do wykorzystania na urządzeniach mobilnych.

A site that's not responsive.
Witryny, które nie są nawet przyjazne dla urządzeń mobilnych, nie są w ogóle przyjazne dla użytkownika.

Idealnie, chcesz, aby Twoja witryna była responsywna, a nie tylko przyjazna dla urządzeń mobilnych. Na szczęście CSS3 zawiera @ media rule, który ma narzędzia, które pomogą Ci stworzyć motyw i zawartość witryny, które są w pełni responsywne.

Co to jest @ media Zasada?

Aby Twoja witryna WordPress była responsywna za pomocą CSS, musisz użyć @ media zasada. Użyłbyś go w podobny sposób, jak w przypadku zwykłej stylizacji ze nawiasami klamrowymi, z tym wyjątkiem, że ta właściwość otacza inne style, takie jak w tym przykładzie:

Ładowanie gist / bac72ae504433fd4fa3e

Dzięki tej strukturze, załączone elementy nabierają reguł ustalonych przez @ media. Możesz określić rodzaj multimediów do wyświetlenia, takich jak Telefony i tablety, drukarki lub czytniki ekranu. Po wybraniu typu nośnika można ustawić jego wartości pod względem rozmiaru za pomocą wyrażenia.

Dzięki tej zasadzie CSS może powiedzieć przeglądarce, aby wyświetlała określoną zawartość w zależności od urządzenia używanego do wyświetlania witryny. Oznacza to, że możesz utworzyć wersję stacjonarną lub pełną witryny wraz z całym innym stylem, który dobrze wyświetla się na mniejszych ekranach telefonów i tabletach, które mogą zobaczyć odwiedzający korzystający z tych urządzeń.

Twoja responsywna strona byłaby kompatybilna ze wszystkimi głównymi przeglądarkami i byłaby wygodnie widoczna dla wszystkich.

W rzeczywistości wszystkie główne przeglądarki były w stanie wyświetlić @ media rządzić przez jakiś czas. Oto zestawienie pierwszych wersji każdej przeglądarki, która go obsługuje:

  • Chrome – 21.0
  • Safari – 4.0
  • Firefox – 3.5
  • Edge – 12.0
  • Internet Explorer – 9.0
  • Opera – 9.0

Podczas tworzenia responsywnej witryny można wiele zrobić z CSS i zaczyna się od wyboru rodzaju multimediów, które mają być responsywne.

Definiowanie Różnych Ekranów

Po pierwsze: zacznij od utworzenia kopii zapasowej styl.css plik do bezpiecznego przechowywania w przypadku popełnienia błędu i konieczności przywrócenia oryginalnej wersji. Po otwarciu pliku i po wpisaniu @ media, musisz dodać typ nośnika tuż obok niego.

Jeśli zdecydujesz się nic nie dodawać, domyślne są wszystkie typy ekranu lub określony rozmiar, który zarysujesz w następnym kroku. Możesz użyć wszystkie również.

Oto inne opcje dla typów multimediów:

  • ekran – Możesz użyć tego na dowolnym ekranie, od telefonów komórkowych i tabletów po laptopy i komputery stacjonarne.
  • Drukuj – Ten jest używany do drukarek. Możesz utworzyć przyjazną do druku wersję strony z tego typu nośnikami.
  • mowa – Ten typ nośnika jest używany do czytników ekranu, które analizują stronę i odczytują zawartość tekstową na głos dla osób niedowidzących.

Przed typem nośnika można również wpisać nie aby wyświetlić styl dla dowolnego ekranu, który nie jest typem multimediów, lub tylko do wyświetlania stylów dla tylko zdefiniowany typ nośnika. Jeśli używasz jednego z nich, musisz również dodać typ nośnika, ponieważ nie będzie to już opcjonalne.

Mając to wszystko na uwadze, do tej pory można wpisać coś, co wygląda podobnie do tego:

Ładowanie gist/629f0269ca342277592e

Stylizacja rozmiarów ekranu

Następnie możesz uzyskać bardziej szczegółowe informacje i zdefiniować rozmiary ekranu, które są wymagane do zastosowania stylów wprowadzanych później. Po typie nośnika wpisz oraz, następnie podążaj za nim wyrażeniem. Jeśli używasz wielu wyrażeń, wszystkie powinny być rozdzielone za pomocą oraz również.

W tym przypadku wyrażenie jest używane do dodawania funkcji multimedialnych, takich jak rozmiar i są one wprowadzane między nawiasami. Po zakończeniu dodawania wyrażeń wpisz nawiasy klamrowe i dodaj CSS, aby nadać styl projektowi zdefiniowany typ nośnika.

Oto jak to wygląda, gdy wszystko jest poskładane do kupy:

Ładowanie gist jennimckinnon / a02057198ddd6df27935

W tym przykładzie użyłem max-szerokość 1024 pikseli. Oznacza to, że ustawiłem maksymalną szerokość na rozmiar ekranu iPada. W ten sposób można również użyć wyrażenia do zdefiniowania określonego rozmiaru ekranu.

Dlaczego chcesz to zrobić? Gdy używasz któregokolwiek z poniższych wyrażeń, możesz kontrolować sposób, w jaki różne urządzenia mobilne wyświetlają wygląd i zawartość witryny:

  • max-szerokość – Maksymalny rozmiar szerokości ekranu typu nośnika, który jest dozwolony do wyświetlania stylów, które są ustawione w @ media zasada. Coś większego, a style nie będą wyświetlane.
  • min-szerokość – Jest to przeciwieństwo powyższego. Ustawia minimalna rozmiar szerokości ekranu danego typu nośnika. Cokolwiek mniejsze, a style nie będą wyświetlane.
  • max-wysokość – Ustawia maksymalną wysokość ekranu danego typu nośnika w celu wyświetlenia załączonych stylów.
  • min-Wysokość – Możesz ustawić minimalną wysokość ekranu. Jeśli ekran jest taki sam lub większy niż wprowadzona kwota, załączone style są wyświetlane na urządzeniu.

Zazwyczaj szerokości są zwykle ustawione i można pominąć wysokość, chyba że masz określony styl, który tego wymaga. Należy pamiętać, że wszystkie urządzenia mają przewijać w górę iw dół, aby wyświetlić całą zawartość strony i właśnie dlatego zwykle nie jest używana.

Gdy poznasz szerokość różnych rozmiarów ekranu dla urządzeń mobilnych, możesz łatwo wystylizować swój motyw i zawartość, aby dobrze wyświetlała się na wybranych urządzeniach.

Oto krótki opis szerokości ekranów dla najpopularniejszych urządzeń:

  • iPhone-640px
  • iPad-1024px
  • Tablety – 1366px
  • Telefony z systemem Android-640px, 720px, 854px, 960px to najbardziej typowe rozmiary
  • Bardzo duże telefony z Androidem-1024px lub 1066px
  • Mniejsze telefony z Windows – 480px
  • Większe telefony z Windows – 768px
  • Mniejsze i starsze telefony-320px
  • Netbooki i małe komputery stacjonarne-128px
  • Ultrabooki / Laptopy-1366px
  • Komputery stacjonarne i Telewizory – 1920px

Jeśli używasz tych szerokości ekranu dla swojego ekran typ nośnika, jesteś na dobrej drodze, aby Twoja witryna wyglądała świetnie na wszystkich urządzeniach.

Istnieje cała skarbnica innych wyrażeń i funkcji multimedialnych, których możesz użyć. Na przykład można zdefiniować rozdzielczość, współczynnik kolorów i indeks kolorów dla typów multimediów, aby wymienić tylko kilka z nich.

Oto przykład tego, jak te funkcje multimedialne mogą wyglądać, aby dać Ci lepsze wyobrażenie o tym, jak możesz z nich korzystać:

Wczytywanie gist / bcb5d71eb7e0e285bde0

W tym przykładzie, aby wyświetlić styl zawartości, rozmiar ekranu musi wynosić co najmniej 1920 pikseli przy minimalnym współczynniku proporcji 16: 9 dla urządzenia. Mówiąc najprościej, ten kod jest idealny do wyświetlania stylów, które są tylko dla telewizorów i dużych ekranów pulpitu, co świetnie nadaje się do wyświetlania filmów w wysokiej rozdzielczości.

Aby zobaczyć pełną listę wszystkich dostępnych, sprawdź w3Schools i witrynę dewelopera Mozilli.

Testowanie strony pod kątem responsywności

Po zakończeniu ważne jest, aby przetestować utworzone elementy, aby upewnić się, że naprawdę działają na wielu lub wszystkich rozmiarach ekranu. Jeśli masz te urządzenia pod ręką, możesz je łatwo odpalić i przetestować, ale może to być trudne, jeśli nie masz ich wszystkich pod ręką.

Na szczęście istnieje wiele sposobów, aby przetestować swoje style i witrynę, aby upewnić się, że jest odpowiednia.

Możesz użyć rozszerzenia przeglądarki Window Resizer Chrome, ResponsiveResize lub ResizeMe Safari oraz Fire Resizer lub Window Resizer dla Firefoksa.

The Window Resizer Chrome extension in a browser showing a list of size options to choose.
Dodanie rozszerzenia zmiany rozmiaru lub dodatku do przeglądarki to przydatny sposób na przetestowanie responsywności witryny.

Istnieje również wiele emulatorów urządzeń mobilnych online, z których można korzystać za darmo.

  • Responsivepx

    A site displaying in a custom window size that's shown as adjustable on a bar at the top of the site.

    Myślę, że ta strona jest zdecydowanie moją ulubioną do sprawdzania responsywności witryny, ponieważ możesz przełączyć przykładowy ekran do dowolnego rozmiaru. Jest to praktycznie punkt kompleksowej obsługi do testowania witryny, przynajmniej jeśli chodzi o szybkość reakcji.

    Może być ważne, aby wiedzieć, że ta witryna używa ramek do wyświetlania adresu URL wprowadzonego u góry strony, więc niektóre witryny nie będą wyświetlane w ogóle, jeśli są zakodowane, aby wyłączyć ładowanie w ramce.

    Zainteresowany Responsivepx?

    Szczegóły
  • iPad Peek

    ipadpeek.com example with the Apple site showing on an iPad on the browser screen.

    Ta strona jest świetna do testowania witryny na najnowszych urządzeniach Apple, w tym iPad i iPhone. Wystarczy wpisać adres URL witryny i jesteś gotowy do pracy.

    Może być ważne, aby pamiętać, że jeśli zakodowałeś witrynę tak, aby nie była wyświetlana w ramce, witryna w ogóle się nie wyświetli.

    Zainteresowany iPad Peek?

    Szczegóły
  • Emulator Telefonu Komórkowego

    The Mobile Phone Emulator site with the WPMU DEV site loaded on the sample smaller HTC phone in the browser window.

    Jest to świetne narzędzie do testowania starszych i mniejszych rozmiarów telefonów. Możesz łatwo zobaczyć, jak dokładnie wygląda Twoja witryna na urządzeniu wybranym z listy rozwijanej w menu.

    Zobaczysz również specyfikacje telefonu, które pomogą Ci dowiedzieć się, co musisz zmienić, jeśli okaże się, że rzeczy wyglądają nieco niepewnie. Dobrą wiadomością jest to, że wszystkie witryny powinny być w stanie załadować za pomocą tego narzędzia.

    Interesuje Cię Emulator telefonu komórkowego?

    Szczegóły
  • Screenfly

    The WP Tavern site being displayed with the dimensions of a Kindle Fire tablet in the browser.

    Ta strona jest w stanie ładować witryny w określonych rozmiarach od komputerów stacjonarnych do tabletów, takich jak Kindle Fire, Samsung Galaxy Tab i Google Nexus 7, wiele typów telefonów i telewizorów.

    Posiada również inne dostępne opcje, takie jak niestandardowe rozmiary, które można wprowadzić, odświeżyć, obrócić obszar okna próbki z boku, aby wyświetlić krajobraz na tabletach i smartfonach, a nawet Niestandardowy link do udostępniania wyników.

    Ta strona nie gra dobrze z żadną witryną, która wyłączyła widok w ramkach, więc pamiętaj o tym, jeśli brzmi to tak, jakby opisywało Twoją witrynę.

    Zainteresowany Screenfly?

    Szczegóły

Po przetestowaniu witryny i jesteś zadowolony, że wygląda świetnie na różnych urządzeniach, możesz wypróbować jeszcze jeden test, który jest ważny: test Przyjazny dla urządzeń mobilnych Google.

The sample results of a site.
Na Test Przyjazny Dla Urządzeń Mobilnych daje dość szczegółowy raport z witryny.

Wszystko, co musisz zrobić, to wprowadzić adres URL witryny, a to narzędzie wyświetli raport i wyświetli wynik pass / fail. Jeśli zdasz test, Twoja strona nie zostanie ukarana przez algorytm Google, a nawet może dać ci wzrost w rankingu.

Jeśli nie jesteś zbyt entuzjastycznie nastawiony do programowania lub nawet jeśli chcesz wykorzystać nowe umiejętności, których nauczyłeś się tutaj, sprawdź nasz motyw z góry. Jest nieskończenie konfigurowalny, ma wbudowane wyświetlacze mobilne, aby przetestować responsywność witryny i można stworzyć witrynę z niewielką znajomością HTML lub CSS. Można również tworzyć solidne zmiany z niektórych kodowania, jak również.

Jesteś gotowy, aby reagować

Zapewnienie responsywności witryny jest niezbędne, ponieważ coraz więcej osób uzyskuje dostęp do Internetu na coraz większej liczbie urządzeń o różnych rozdzielczościach ekranu.

Jeśli chcesz więcej inspiracji CSS3, sprawdź Media Queries, prezentację responsywnych projektów stron internetowych.

Dzięki wszystkim narzędziom i informacjom zawartym w tym artykule powinieneś mieć wszystko, czego potrzebujesz, aby Twoja witryna była responsywna za pomocą CSS3. Po zakończeniu możesz również przetestować swoją witrynę, aby upewnić się, że spełniasz wymagania dotyczące responsywności.

Aby uzyskać więcej samouczków CSS, aby dostosować swoją witrynę do własnych potrzeb, sprawdź niektóre z naszych innych postów: dodawanie ikon mediów społecznościowych do WordPress za pomocą sprite ‘ ów CSS, dodawanie niestandardowych czcionek do WordPress za pomocą @font-face i CSS3 i spraw, aby Twoje obrazy Pop z Super łatwą i seksowną stylizacją CSS.

Czy udało Ci się stworzyć responsywną stronę za pomocą tego samouczka? Jakie są Twoje cele dla strony responsywnej? Podziel się swoimi przemyśleniami w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…