Jak używać zapytań o media w HTML i CSS do tworzenia responsywnych witryn internetowych

Jeśli chcesz tworzyć strony internetowe / aplikacje internetowe, wiedza o tym, jak tworzyć responsywne projekty, jest niezbędna dla Twojego sukcesu.

W przeszłości tworzenie witryn internetowych, które dobrze dostosowywały się do różnych rozmiarów ekranu, było luksusem, którego właściciele musieli wymagać od programisty. Jednak wzrost wykorzystania smartfonów i tabletów sprawił, że projektowanie responsywne stało się koniecznością w świecie tworzenia oprogramowania.

Korzystanie z zapytań o media to bez wątpienia najlepszy sposób, aby Twoja witryna / aplikacja internetowa wyglądała dokładnie tak, jak chcesz, na każdym urządzeniu.

Zrozumienie projektowania responsywnego

W skrócie, projektowanie responsywne polega na wykorzystaniu HTML / CSS do stworzenia układu strony internetowej / aplikacji internetowej, który dostosowuje się do różnych rozmiarów ekranu. W HTML / CSS istnieje kilka różnych sposobów na osiągnięcie responsywności w projekcie strony internetowej:

• Używanie jednostek rem i em zamiast pikseli (px)
instagram viewer
• Ustawienie widocznego obszaru / skali każdej strony internetowej
• Korzystanie z zapytań o media

Zapytanie o media to funkcja CSS, która została wydana w wersji CSS3. Wraz z wprowadzeniem tej nowej funkcji użytkownicy CSS zyskują możliwość dostosowania wyświetlania strony internetowej w oparciu o wysokość, szerokość i orientację urządzenia / ekranu (tryb poziomy lub pionowy).

Czytaj więcej: Ściągawka z podstawowych właściwości CSS3

Zapytania o media zapewniają strukturę do jednokrotnego tworzenia kodu i używania go wielokrotnie w całym programie. Może to nie wydawać się zbyt pomocne, jeśli tworzysz witrynę internetową zawierającą tylko trzy strony internetowe, ale jeśli pracujesz dla firmy, która ma setki różnych stron internetowych - to będzie ogromny czas wygaszacz.

Podczas korzystania z zapytań o media należy wziąć pod uwagę kilka różnych rzeczy: strukturę, położenie, zakres i łączenie.

@ media only / not media-type and (expression) {
/ * Kod CSS * /
}

Ogólna struktura zapytania o media obejmuje:

• Słowo kluczowe @media
• Nie / jedyne słowo kluczowe
• Typ multimediów (może to być ekran, druk lub mowa)
• Słowo kluczowe „i”
• Unikalne wyrażenie w nawiasach
• Kod CSS ujęty w parę otwierających i zamykających nawiasów klamrowych.

Związane z: Używanie CSS do formatowania dokumentów do drukowania

Ekran @ media only i (max-width: 450px) {
ciało{
kolor tła: niebieski;
}
}

W powyższym przykładzie styl CSS (w szczególności niebieski kolor tła) jest stosowany tylko do ekranów urządzeń o szerokości 450 pikseli i mniejszych - czyli w zasadzie smartfonów. Słowo kluczowe „jedyne” można zastąpić słowem kluczowym „nie”, a wtedy style CSS w powyższym zapytaniu o media będą miały zastosowanie tylko do druku i mowy.

Jednak domyślnie ogólna deklaracja zapytania o media dotyczy wszystkich trzech typów mediów, więc nie ma potrzeby określania typu mediów, chyba że celem jest wykluczenie jednego lub więcej z nich.

/ * projekt dla smartfonów * /
@media (max-width: 450px) {
ciało{
kolor tła: niebieski;
}
}

Zapytanie o media to właściwość CSS; dlatego może być używany tylko w języku stylizacji. Istnieją trzy różne sposoby włączenia CSS do kodu; jednak tylko dwie z tych metod zapewniają praktyczny sposób włączania zapytań o media do programów - wewnętrzny lub zewnętrzny CSS.

Metoda wewnętrzna obejmuje dodanie

Metoda zewnętrzna polega na utworzeniu zapytania o media w zewnętrznym pliku CSS i połączeniu go z plikiem HTML za pośrednictwem rozszerzenia etykietka.

Niezależnie od tego, czy zapytania o media są używane za pośrednictwem wewnętrznego czy zewnętrznego CSS, istnieje jeden główny aspekt języka stylów, który może niekorzystnie wpłynąć na działanie zapytania o media. CSS ma kolejność reguł pierwszeństwa. Podczas korzystania z Selektor CSS, czyli w tym przypadku zapytanie o media, każde nowe zapytanie o media dodane do pliku CSS zastępuje (lub ma pierwszeństwo) to, które pojawiło się wcześniej.

Domyślny kod zapytania o media, który mamy powyżej, jest skierowany do smartfonów (450 pikseli szerokości i poniżej), więc jeśli chcesz ustawić inne tło dla tabletów, które możesz pomyśleć, możesz po prostu dodać następujący kod do istniejącego pliku CSS.

/ * projekt na tablety * /
@media (max-width: 800px) {
ciało{
kolor tła: czerwony;
}
}

Jedynym problemem jest to, że ze względu na kolejność pierwszeństwa tablety miałyby czerwony kolor tła, a smartfony miałyby teraz również czerwone tło, ponieważ 450 pikseli i mniej jest poniżej 800 pikseli.

Jednym ze sposobów rozwiązania tego małego problemu byłoby dodanie zapytania o media dla tabletów przed zapytaniem dotyczącym smartfonów; to drugie zastąpiłoby to pierwsze i miałbyś teraz smartfony z niebieskim tłem i tablety z czerwonym tłem.

Istnieje jednak lepszy sposób na osiągnięcie oddzielnej stylizacji dla smartfonów i tabletów bez obawy o kolejność pierwszeństwa. Jest to funkcja zapytań o media zwana specyfikacją zakresu, w której programista może utworzyć zapytanie o media z maksymalną i minimalną szerokością (zakresem).

/ * projekt na tablety * /
@media (max-width: 800px) i (min-width: 451) {
ciało{
kolor tła: czerwony;
}
}

W powyższym przykładzie umieszczanie zapytań o media w arkuszu stylów staje się nieistotne, ponieważ projekt tabletów i smartfonów jest ukierunkowany na dwa oddzielne zbiory szerokości.

Jeśli nie chcesz osadzać zapytań o media w swoim kodzie CSS, możesz skorzystać z alternatywnej metody. Ta metoda obejmuje używanie zapytań o media w tagu pliku HTML, więc zamiast jednego ogromnego arkusza stylów, który zawiera preferencje dotyczące stylów dla smartfony, tablety i komputery - możesz użyć trzech oddzielnych plików CSS i utworzyć zapytania o media w formacie the etykietka.

Plik tag to element HTML używany do importowania stylów CSS z zewnętrznego arkusza stylów. Ten tag ma właściwość media, która działa tak samo, jak zapytanie o media w CSS.

 główny arkusz stylów 

 arkusz stylów tabletu 
href = "tablet.css">
 arkusz stylów smartfona 

Powyższy kod należy umieścić w pliku

tag w pliku HTML. Teraz wszystko, co musisz zrobić, to utworzyć trzy oddzielne pliki CSS z nazwami plików main.css, tablet.css i smartphone.css, a następnie utwórz projekt, który chcesz dopasować do każdego urządzenia.

Styl w pliku głównym zostanie zastosowany do wszystkich ekranów o szerokości większej niż 800 pikseli, styl z pliku tabletu zostanie zastosowany do wszystkich ekranów o szerokości od 450 do 801 pikseli, a styl w pliku smartfona będzie dotyczył wszystkich poniższych ekranów 451px.

Jeśli dotarłeś do końca tego artykułu, byłeś w stanie dowiedzieć się, czym jest projektowanie responsywne i dlaczego jest użyteczne. Możesz teraz identyfikować i używać zapytań o media w plikach CSS i HTML. Ponadto zostałeś wprowadzony w kolejność pierwszeństwa w CSS i zobaczyłeś, jak może to wpłynąć na działanie zapytań o media.

Źródło zdjęcia: Spacja negatywna /Pexels

Jak ustawić obraz tła w CSS

CSS to potężne narzędzie do stylizacji stron internetowych. Nauka umieszczania obrazu tła nauczy Cię wielu podstaw CSS.

Czytaj dalej

O autorze