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. Czytaj dalej, lub Skocz do przodu, korzystając z tych linków:
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 responsywny projekt 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.
Z drugiej strony witryny przyjazne dla urządzeń mobilnych 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ść.
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.
Idealnie, chcesz, aby Twoja witryna była responsywna, a nie tylko przyjazna dla urządzeń mobilnych. Na szczęście CSS3 zawiera regułę @ media, która ma narzędzia, które pomogą Ci stworzyć motyw i zawartość witryny, które są w pełni responsywne.
Aby Twoja witryna WordPress była responsywna za pomocą CSS, musisz użyć reguły @ media. Użyłbyś go w podobny sposób, jak w przypadku zwykłej stylizacji z klamrami, z tym wyjątkiem, że ta właściwość OTjej style takie jak w tym przykładzie:
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świetlać regułę @media od dłuższego czasu. Oto zestawienie pierwszych wersji każdej przeglądarki, która go obsługuje:
- Chrom-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 wpisaniu @media należy dodać typ mediów 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ć wszystkiego.
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.
- druk-ten jest używany do drukarek. Możesz utworzyć przyjazną do druku wersję strony z tego typu nośnikami.
- mowa-ten typ mediów 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ż wprowadzić Nie wyświetlanie stylu dla dowolnego ekranu, który nie jest typem nośnika, lub tylko wyświetlanie 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:
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 wprowadź, a następnie wykonaj go wyrażeniem. Jeśli używasz wielu wyrażeń, wszystkie powinny być oddzielone i.
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:
W tym przykładzie użyłem maksymalnej szerokości 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ć? dokładnie? 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-width-maksymalny rozmiar szerokości ekranu danego typu nośnika, który jest dozwolony do wyświetlania stylów ustawionych w regule @ media. 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-height-ustawia maksymalną wysokość ekranu danego typu nośnika w celu wyświetlenia załączonych stylów.
- min-height – 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 typu nośnika ekranu, 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ć:
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.
e rozszerzenie Window Resizer Chrome w przeglądarce pokazujące listę opcji rozmiaru do wyboru.”width=” 735″height=” 300 ” />dodanie rozszerzenia zmiany rozmiaru lub dodatku do przeglądarki jest poręcznym sposobem przetestowania responsywności witryny.
Istnieje również wiele emulatorów urządzeń mobilnych online, z których można korzystać za darmo.
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.
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.
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.
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ę.
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.
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 wygra”t być karane przez algorytm Google i może nawet dać impuls 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.
Tagi:
