Skorzystaj z tych wskazówek, aby skutecznie tworzyć responsywne układy.
Wyobraź sobie, że wykonałeś całą ciężką pracę, aby stworzyć naprawdę fajny układ. Ale kiedy zmniejszysz trochę okno przeglądarki, znajdziesz coś, co jest przepełnione. Wrzucasz zapytanie o media, aby rozwiązać problem. Ale po zmianie rozmiaru okna zauważysz, że coś jeszcze się zepsuło.
Jest to coś, czego w pewnym momencie doświadczy większość programistów CSS. Ale na szczęście mamy kilka nowoczesnych rozwiązań CSS, które znacznie ułatwiają tworzenie rzeczy i zapewnienie ich dobrego działania. W tym artykule opisano 5 przydatnych praktyk, o których należy pamiętać podczas tworzenia witryn internetowych. Te wskazówki pomogą Ci uniknąć irytujących przerw w projekcie.
1. Zacznij od globalnego arkusza stylów
Zawsze zaczynaj od globalnej stylizacji podczas pisania CSS. Nie martw się o układ. Zamiast tego ustaw ogólne style, takie jak typografia, kolory i tła. Zresetuj marginesy, usuń podkreślenia z linków i tak dalej.
Po zakończeniu ogólnej stylizacji możesz przystąpić do tworzenia układu i kierowania na poszczególne elementy w układzie. Zasadniczo zacznij od góry, a następnie przejdź do elementów.
Poniższy przykład CSS resetuje margines wszystkich elementów do 0, definiuje typografię i kolor wszystkich głównych nagłówków oraz dodaje spójny margines do wszystkich z nich:
ciało,
h1,
h2,
h3,
P {
margines: 0;
}h1,
h2,
h3 {
kolor: niebieski;
rodzina czcionek: "Verdana" bezszeryfowe;
grubość czcionki: 900;
Wysokość linii: 1;
}
h2,
h3,
P {
margines-dolny: 1Rem;
}
Teraz, gdy masz zdefiniowane wszystkie podstawowe style, możesz budować na ich podstawie. Na przykład możesz dodać wypełnienie do elementu kontenera. Spowoduje to odsunięcie treści od krawędzi przeglądarki. Następnie możesz zastosować maksymalna szerokość do obrazów, dzięki czemu mogą dostosować się do szerokości kontenera. Chodzi o to, aby zacząć od ogólnych elementów przed skupieniem się na konkretnych elementach.
Po raz kolejny układ będzie responsywny. Tak więc, gdy zmienisz rozmiar ekranu, rozmiar elementów zmieni się odpowiednio. Jako programista powinieneś znać te wskazówki i sztuczki dotyczące CSS ponieważ mogą przenieść Twoją produktywność na wyższy poziom.
2. Unikaj stałych rozmiarów
Kiedy zaczynasz myśleć o układach, pierwszą rzeczą, o której powinieneś pamiętać, jest unikanie stałych rozmiarów. Stałe rozmiary odnoszą się do właściwości takich jak szerokość: 1000px, wysokość: 200px, i tak dalej. Ustawienie stałej wysokości lub szerokości spowoduje tylko problemy na dłuższą metę.
Zamiast tego użyj elastycznych wysokości i szerokości. Jednym ze sposobów jest użycie minimalna wysokość I minimalna szerokość zamiast wysokość I szerokość. Załóżmy na przykład, że ustawiłeś szerokość elementu na 600 pikseli. Gdy zmniejszysz rozmiar niż 600 pikseli, zawartość się przepełni:
Zamiast tego należy zmienić właściwość z szerokość Do maksymalna szerokość. Z maksymalna szerokość, element będzie mógł się zmniejszać w miarę zawężania okna przeglądarki. A jeśli okno stanie się szerokie, tekst wróci do pierwotnej długości. Oto wynik:
To jest to samo dla wysokość. Załóżmy na przykład, że ustawiłeś wysokość nagłówka do stałej wartości 200 pikseli.
nagłówek {
wysokość: 200piks;
wyświetlacz: siatka;
elementy miejsca: Centrum;
}
To idealnie wyśrodkowuje wszystko w nagłówku. Ale kiedy zawęzisz okno przeglądarki, zawartość w końcu wypłynie z pojemnika. A to dlatego, że ustawiłeś stałą wysokość nagłówka.
Ogólnie, wysokość I szerokość są właściwościami niebezpiecznymi. Rozwiązaniem jest zastosowanie regulowanej wysokości i szerokości, tj. min- I maksymalna wysokość, I min- I maksymalna szerokość. W takich przypadkach, jeśli przeglądarka natrafi na sytuacje, w których treść się wydłuża, nagłówek będzie się do tego dostosowywał.
To jest jeden z najczęstsze błędy CSS, których powinieneś unikać.
3. Pamiętaj, że Twoja witryna jest domyślnie responsywna
Pamiętaj, że Twoja strona jest responsywna, nawet zanim napiszesz choćby jedną linijkę kodu CSS. Takie nastawienie może pomóc uniknąć nadmiernego komplikowania procesu projektowania. Układ będzie działał na dużych ekranach i małych ekranach. To może nie być ładne. Czytanie na dużych ekranach może być nawet trudne. Ale witryna dostosowuje się do widocznego obszaru bez względu na jej rozmiar.
Oczywiście obrazy mogą się przepełniać, a tekst może być za mały. Ale nic nie stracisz dzięki domyślnemu układowi. Twój tekst nie pęknie, a wszystkie elementy będą widoczne na ekranie.
Zrozumienie i zaakceptowanie tego faktu może naprawdę pomóc podczas pisania kodu CSS. Gdy napotkasz problemy, będziesz mieć pewność, że błąd wynika z napisanego przez Ciebie CSS. Ułatwia to znalezienie problemu i jego rozwiązanie.
Spróbuj użyć zapytań o media tylko w celu zwiększenia złożoności. Na przykład, gdy chcesz, aby Twój układ miał trzy kolumny na większych ekranach. W przeciwnym razie nie używaj ich. Aby uzyskać szczegółowe informacje na temat zapytań o media, przeczytaj nasze przewodnik po zapytaniach o media.
Oto jeden scenariusz. Wyobraź sobie, że element o nazwie klasy .podział ma w sobie trzy elementy. Z następującym CSS zostanie utworzony układ z trzema kolumnami:
.podział {
wyświetlacz: przewód;
kierunek zginania: wiersz;
luka: 2Rem;
}
Na mniejszych ekranach (40em szeroki lub mniejszy), chciałbyś, aby wszystko zajmowało jedną kolumnę. Więc zrobiłbyś to:
@głoska bezdźwięczna(maksymalna szerokość: 40em) {
.podział {
wyświetlacz: blok;
}
}
Tutaj nadpisujesz domyślne wyrównanie (trzy kolumny). Ale zapytanie o media jest niepotrzebne, ponieważ przeglądarka używa Blok wyświetlacza domyślnie. Więc nie musisz tego jednoznacznie definiować.
Mając to na uwadze, możesz zrefaktoryzować swój kod, aby używać pojedynczego zapytania o media, które ma zastosowanie tylko do dużych ekranów. Tam przełączysz się na trzy kolumny, gdy ekran jest szerszy niż 40em:
@głoska bezdźwięczna(maksymalna szerokość: 40em) {
.podział {
wyświetlacz: przewód;
kierunek zginania: wiersz;
luka: 2Rem;
}
}
Na małych ekranach przeglądarka umieszcza wszystko w jednej kolumnie. Ale nie musisz tego określać, ponieważ przeglądarka używa Blok wyświetlacza domyślnie. W związku z tym użyłeś zapytań o media tylko w celu zwiększenia złożoności.
Więc zamiast dodawać złożoność, a następnie zastępować kilka właściwości, teraz dodajesz złożoność, kiedy jej potrzebujesz. Przez większość czasu będziesz tylko potrzebować minimalna szerokość zapytania medialne. Zacznij od ustawienia na urządzeniach mobilnych, a gdy witryna wygląda świetnie na urządzeniach mobilnych, dodaj złożoność (np. kolumny) wersji na komputery.
5. Skorzystaj z nowoczesnego CSS
Korzystając z nowoczesnych metod CSS, możesz uciec od większości problemów z wyrównaniem i punktów przerwania i przejść do osiągnięcia wewnętrznego projektu.
Jednym ze sposobów, w jaki możesz to zrobić, jest:
h1 {rozmiar czcionki: zacisk (3rem, 1rem + 10vw, 7rem)}
To zaciska h1 między minimalnym a maksymalnym rozmiarem czcionki. Najmniejszy, do którego chcemy, żeby się udał, to 3 rem i jest najwyższy 7rem. Środek jest tym, co będziemy iterować (1rem + 10 vw). W rezultacie tytuł będzie się automatycznie zmniejszał wraz ze zmniejszaniem się widocznego obszaru i powiększał się wraz ze wzrostem.
Dowiedz się więcej o nowoczesnym CSS
CSS bardzo ewoluował przez lata. Dzisiaj mamy nowsze i lepsze podejścia do pozycjonowania elementów w CSS. W tym artykule poruszyliśmy niektóre z tych praktyk i podkreśliliśmy, w jaki sposób mogą one pomóc w uniknięciu typowych pułapek projektowych. Jednym z najlepszych sposobów nauki nowoczesnego CSS jest podejście praktyczne, takie jak użycie nowoczesnego CSS do zaprojektowania tabeli HTML.