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

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

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





W przeszłości tworzenie stron internetowych, które dobrze dostosowywały się do różnych rozmiarów ekranu, było luksusem, o który właściciele witryn musieli poprosić dewelopera. 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 zdecydowanie najlepszy sposób na zapewnienie, że Twoja witryna/aplikacja internetowa będzie wyglądać dokładnie tak, jak chcesz na każdym urządzeniu.





Zrozumienie projektowania responsywnego

Krótko mówiąc, projektowanie responsywne polega na wykorzystaniu HTML/CSS do stworzenia układu strony internetowej/aplikacji internetowej, która dostosowuje się do różnych rozmiarów ekranu. W HTML/CSS istnieje kilka różnych sposobów na uzyskanie responsywności w projekcie strony internetowej:

  • Używanie jednostek rem i em zamiast pikseli (px)
  • Ustawianie obszaru wyświetlania/skali każdej strony internetowej
  • Korzystanie z zapytań o media

Co to są zapytania o media?

Zapytanie o media to funkcja CSS wydana w wersji CSS3. Dzięki wprowadzeniu 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).



Przeczytaj więcej: Ściągawka Essential CSS3 Properties

Zapytania o media zapewniają strukturę do jednorazowego tworzenia kodu i wielokrotnego używania go w całym programie. Może to nie wydawać się tak pomocne, jeśli tworzysz witrynę internetową z tylko trzema stronami internetowymi, ale jeśli pracujesz dla firmy z setkami różnych stron internetowych – okaże się to ogromną oszczędnością czasu.



Korzystanie z zapytań o media

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

Struktura zapytań medialnych

Przykład struktury zapytania o media


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

Ogólna struktura zapytania o media obejmuje:



  • Słowo kluczowe @media
  • Słowo kluczowe nie/tylko
  • Typ nośnika (którym może być ekran, druk lub mowa)
  • Słowo kluczowe i
  • Unikalne wyrażenie ujęte w nawiasy
  • Kod CSS zawarty w parze nawiasów klamrowych otwierających i zamykających.

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

Przykład zapytania o media z jedynym słowem kluczowym


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Powyższy przykład stosuje styl CSS (konkretnie niebieski kolor tła) tylko do ekranów urządzeń o szerokości 450 pikseli i mniejszej – czyli w zasadzie smartfonów. Jedyne słowo kluczowe można zastąpić słowem kluczowym not, a wtedy styl CSS w powyższym zapytaniu o media będzie miał 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.

Przykład domyślnego zapytania o media


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Umiejscowienie zapytań medialnych

Zapytanie o media to właściwość CSS; dlatego można go używać tylko w języku stylizacji. Istnieją trzy różne sposoby umieszczania CSS w kodzie; jednak tylko dwie z tych metod zapewniają praktyczny sposób umieszczania zapytań o media w twoich programach — wewnętrzny lub zewnętrzny CSS.

Metoda wewnętrzna obejmuje dodanie tagu do tagu pliku HTML i utworzenie zapytania o media w ramach parametrów tagu.

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

Zakres zapytań medialnych

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 stylizacji, który może niekorzystnie wpłynąć na działanie zapytania o media. CSS ma regułę kolejności pierwszeństwa. W przypadku korzystania z selektora CSS , czyli w tym przypadku zapytania o media, każde nowe zapytanie o media dodane do pliku CSS zastępuje (lub ma pierwszeństwo) poprzednie.

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

Przykład zapytania o media tabletu


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Jedynym problemem jest to, że ze względu na kolejność pierwszeństwa tablety miałyby czerwone tło, a smartfony miałyby teraz także czerwone tło, ponieważ 450 pikseli i mniej to mniej niż 800 pikseli.

Jednym ze sposobów rozwiązania tego małego problemu byłoby dodanie zapytania o media dla tabletów przed zapytaniami dla smartfonów; ta druga zastąpiłaby poprzednią i teraz będziesz mieć smartfony z niebieskim tłem i tablety z czerwonym tłem.

Istnieje jednak lepszy sposób na uzyskanie oddzielnej stylizacji dla smartfonów i tabletów bez obawy o kolejność pierwszeństwa. Jest to funkcja zapytań o media, znana jako specyfikacja zakresu, w której programista może utworzyć zapytanie o media o maksymalnej i minimalnej szerokości (zakresie).

Zapytanie o media tabletu z przykładem zakresu


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

W powyższym przykładzie umieszczenie zapytań o media w arkuszu stylów staje się nieistotne, ponieważ projekt na tablety i smartfony jest skierowany na dwa oddzielne kolekcje szerokości.

Jeśli nie chcesz osadzać zapytań o media w kodzie CSS, możesz skorzystać z alternatywnej metody. Ta metoda polega na użyciu zapytań o media w tagu pliku HTML, więc zamiast jednego ogromnego arkusza stylów zawierającego preferencje dotyczące stylów dla smartfonów, tabletów i komputerów — możesz użyć trzech oddzielnych plików CSS i utworzyć w tagu zapytania o media.

Znacznik jest elementem HTML używanym 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.




href='tablet.css'>


Powyższy kod należy umieścić w tagu pliku HTML. Teraz wszystko, co musisz zrobić, to utworzyć trzy oddzielne pliki CSS o nazwach main.css, tablet.css i smartphone.css, a następnie utworzyć konkretny projekt, który chcesz mieć dla każdego urządzenia.

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

jak mieć gifa jako tapetę windows 10

Teraz masz narzędzia do tworzenia responsywnych projektów

Jeśli dotarłeś do końca tego artykułu, mogłeś dowiedzieć się, czym jest responsywny design i dlaczego jest przydatny. Możesz teraz identyfikować i używać zapytań o media w plikach CSS i HTML. Ponadto zapoznałeś się z kolejnością pierwszeństwa w CSS i zobaczyłeś, jak może ona wpłynąć na działanie zapytań o media.

Źródło obrazu: negatywna przestrzeń/ Pexels

Udział Udział Ćwierkać E-mail Jak ustawić obraz tła w CSS

CSS to potężne narzędzie do stylizowania stron internetowych. Nauczenie się, jak umieścić obraz tła, nauczy Cię wielu podstaw CSS.

Czytaj dalej Powiązane tematy
  • Programowanie
  • Tworzenie stron internetowych
  • Projektowanie stron
  • CSS
O autorze Kadeisha Kean(21 opublikowanych artykułów)

Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).

Więcej od Kadeishy Kean

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować