Jak ukryć elementy za pomocą zapytań multimedialnych

Zapytania o media CSS są określane jako te zapytania, które pozwalają na zmianę wyglądu witryny zgodnie z urządzeniem, na którym jest wyświetlane. Te zapytania wykorzystują zasadę CSS @Media i wymagają zdefiniowania typu medialnego i niektórych funkcji multimediów w postaci logicznych wyrażeń. Jest wiele rzeczy, które możesz zrobić w swojej responsywnej stronie internetowej za pomocą zapytań medialnych, jednak w tym pism.

Zaczynajmy.

Jak ukryć elementy za pomocą zapytań multimedialnych

Jak już wspomniano, zapytania medialne pomagają w projektowaniu responsywnych stron internetowych. Te responsywne strony wymagają posiadania określonego rozmiaru ekranu, aby mieć pełny dostęp do niektórych funkcji. Tutaj zademonstrujemy, jak ukryć elementy za pomocą zapytań medialnych, ale wcześniej zrozummy najpierw składnię tych zapytań.

Składnia

@Media ekran i (min min: 480px) i (maksymalna szerokość: 720px)

//Kod;

Zapytanie zawsze zaczyna się od reguły @Media i wymaga określenia typu mediów, na którym ma być stosowane zapytanie. Na przykład użyliśmy typu nośnika ekranu tutaj w powyższej składni. Następnie niektórzy operatorzy, tacy jak „i„ są używane do łączenia funkcji multimediów, takich jak szerokość minuta lub maksymalna szerokość.

Teraz, gdy dobrze rozumiemy składnię zapytania mediów, nauczmy się ukrywać elementy za pomocą tych zapytań za pomocą przykładu.

Html

Będzie to widoczne, jeśli szerokość maksymalnie ekranu wynosi 700px lub szersza.
Będzie to widoczne, jeśli szerokość maksymalnego ekranu jest 300px lub szersza.
Będzie to widoczne, jeśli szerokość maksymalnego ekranu jest 200px lub szersza.

Tutaj stworzyliśmy trzy elementy div i przypisaliśmy każdemu z nich inną klasę, aby pokazać, jak ukryć elementy na podstawie różnych rozmiarów ekranu.

CSS

div.pojemnik
kolor tła: Rosybrown;
szerokość: 200px;
Wysokość: 100px;
Wyściółka: 15px;
Margines: 5px;
Wyświetlacz: Block Inline;

W powyższym kodzie stylizujemy wszystkie trzy elementy divów jednocześnie za pomocą klasy kontenera. Elementy otrzymały trochę koloru tła, szerokość, wysokość, wyściółka i margines. Ponadto wyświetlamy te elementy jako blok wbudowy, ponieważ później podczas korzystania z zapytań multimedialnych ich wyświetlacz musi być ustawiony na nią, aby je ukryć.

CSS

@Media ekran i (maksymalna szerokość: 700px)
div.duży
Nie wyświetla się;

W powyższym zapytaniu określamy, że urządzenia, które mają maksymalną szerokość do 700px, div o nazwie klasy „duży” ukryje się, ponieważ wyświetlacz został ustawiony na brak. Jeśli jednak szerokość ekranu wynosi 700px lub szersza, elementy będą widoczne.

CSS

@Media ekran i (maksymalna szerokość: 300px)
div.średni
Nie wyświetla się;

Tymczasem to zapytanie stwierdza, że ​​pokazuje kontener DIV z nazwą klasy „średnią” tylko wtedy, gdy szerokość ekranu jest 300px lub szersza, w przeciwnym razie zostanie ukryte.

CSS

@Media ekran i (maksymalna szerokość: 200px)
div.mały
Nie wyświetla się;

I na koniec, powyższe zapytanie określa, aby pokazać kontenera Div w stanie, gdy szerokość ekranu jest 200px lub szersza, w przeciwnym razie zapytanie multimedialne ukryje

Wyjście

Gdy rozmiar ekranu jest 700px lub większy.

Gdy rozmiar ekranu wynosi od 300px do 700px.

A gdy szerokość ekranu wynosi od 200 px do 300px.

Elementy zostały z powodzeniem ukryte za pomocą zapytań medialnych.

Wniosek

Aby ukryć elementy z zapytaniami o media, musisz po prostu ustawić ich wyświetlacz na żadne w konkretnym zapytaniu multimedialnym. Zapytania medialne okazują się bardzo przydatne przy projektowaniu responsywnych stron internetowych, dlatego możesz je użyć, aby udostępnić swoje elementy w zależności od rozmiaru ekranu urządzenia. Tutaj w tym poście zademonstrowaliśmy z pomocą przykładu, w jaki sposób możesz ukryć swoje elementy za pomocą zapytań multimedialnych.