Zapytania o media to funkcja CSS, która pozwala treści stron internetowych dostosować się do różnych rozmiarów ekranu i uprawnień. Stanowią integralną część elastycznego projektowania stron internetowych i służą do dostosowywania wyglądu witryn do wielu urządzeń o różnych rozmiarach ekranu. Tak, Media Queries to moduł CSS3, który pozwala konwertować zawartość na takie warunki, jak rozdzielczość ekranu na smartfonie lub komputerze. Zostań rekomendowanym standardem W3C w czerwcu 2012 r. I jest on obecnie aktywnie wykorzystywany w tworzeniu stron internetowych i projektowaniu graficznym.


Zapytania o media CSS są przydatne, jeśli chcesz zastosować style w oparciu o ogólny typ urządzenia (np. Druk lub ekran), określone funkcje (takie jak szerokość okna przeglądarki) lub środowisko (na przykład w warunkach oświetlenia otoczenia). Ogromna liczba dostępnych obecnie urządzeń internetowych sprawia, że ​​zapytania o media są ważnym narzędziem do tworzenia stron internetowych i aplikacji, które są wystarczająco stabilne, aby działały na dowolnym sprzęcie.

Historia

Zapytania o media zostały po raz pierwszy zidentyfikowane w oryginalnym zdaniu CSS Hocon Wium Lie w 1994 r., Ale w tym czasie nie stały się częścią CSS1. Rekomendacja HTML4 z 1997 r. Stanowi przykład tego, w jaki sposób można dodać te komponenty w przyszłości. W 2000 roku W3C rozpoczął pracę nad Media Queries. Pierwszy publiczny projekt dotyczący zapytań o media został opublikowany w 2001 roku. Specyfikacja stała się rekomendacją W3C w 2012 roku poprzeglądarki dodały obsługę.

W jaki sposób są zapisywane w zapytaniach o media CSS?

Wnioski może być umieszczony w plik HTML strony lub zawarte w odrębnym .CSS plików, do którego się odnosi. Opis i przykład zapytań mediów CSS: @media ekranem i (maksymalna szerokość: 768px) {nagłówek {wysokość: 70 pikseli;} artykuł {czcionki, rozmiar: 14px;} img {maksymalna szerokość: 480 na;}} Żądanie w multimediach powyżej jest aktywowany, jeśli okno przeglądarki ma 768 pikseli szerokości lub mniej. Może się to zdarzyć, jeśli zmniejszyć okno na pulpicie lub urządzenia przenośnego, takiego jak tabletka do przeglądania zawartości sieci Web.

Jak korzystać z zapytań o media CSS3?

W odpowiednim projekcie strony internetowej zapytania o media działają jak filtry dla różnych rozmiarów ekranu. Podobnie jak wszystkie moduły w kaskadowych arkuszy stylów, te, które pojawiają się obok na liście, określenia te powyżej nich. Ponieważ domyślny styl typowo zdefiniowane w CSS pierwszy dokument, a następnie zapytaniami mediów dla różnych rozmiarów ekranu. Na przykład, pierwszy można zdefiniować styl pulpitu, a następnie zażądać style multimedialnych dla użytkowników tabletów, a następnie - dla użytkowników smartfonów. Style można również definiować w odwrotnej kolejności. Podczas gdy minimalna szerokość jest najczęstszą funkcją używaną w zapytaniach o media, wiele innych jest również powszechnie dostępnych. Wymiary obrazu w zapytaniach o media CSS obejmują:

minimalną szerokość urządzenia;

minimalna wysokość urządzenia;

współczynnik kształtu;

maksymalny wskaźnik koloru;

maksimumrozdzielczość;

orientacja ekranu.

Na przykład wartość rozdzielczości może być używana do wykrywania wyświetlaczy HiDPI (takich jak obrazy siatkówki) i pobierania grafiki o wysokiej rozdzielczości zamiast standardowych obrazów.

Wykorzystanie i błędy

Dlaczego zapytania dotyczące mediów CSS nie działają? Ten komponent składa się z jednego rodzaju nośnika i jednego lub więcej wyrażeń używających funkcji multimedialnych, które zwracają wartość true lub false. Wynik zapytania jest prawdziwy, jeśli typ nośnika określony w nim jest zgodny z typem urządzenia, na którym dokument jest wyświetlany, a wszystkie wyrażenia w żądaniu multimedialnym są prawdziwe. W przypadkach, w których zapytania o media CSS nie działają, musisz sprawdzić odpowiednie reguły dotyczące stylu i reguł kaskadowych. Te dane mogą zawierać błąd.

Typy mediów

Typ mediów można zadeklarować w nagłówku dokumentu HTML za pomocą atrybutu "media" wewnątrz elementu. Wartość atrybutu media wskazuje, które urządzenie wyświetli połączony dokument. Typy mediów można również zadeklarować w instrukcjach przetwarzania XML, @import at-rule i @media at-rule. Multimedialny typ "all" można również wykorzystać do wskazania, że ​​arkusz stylów jest stosowany do wszystkich typów mediów.

Czym jest CSS?

CSS (kaskadowy arkusz stylów lub kaskadowe arkusze stylów) służy do formatowania układu strony internetowej, definiowania stylów tekstu, rozmiarów tabel i innych aspektów treści internetowych, które wcześniej można było zdefiniować tylko w strukturze strony HTML. CSS pomaga programistom tworzyć jeden format dla wielustrony witryny. Zamiast definiować typ każdej tabeli i każdego bloku tekstu w stylu HTML, są one określone tylko raz w dokumencie CSS. Gdy format jest określony w kaskadowym arkuszu stylów, może być używany przez dowolną stronę, która prowadzi do pliku CSS. Ponadto CSS ułatwia zmianę stylów na wielu stronach jednocześnie. Na przykład twórca stron internetowych może zaplanować wzrost domyślnego rozmiaru tekstu z 10 do 12 na pięćdziesięciu stronach witryny. Jeśli wszystkie strony są odsyłane do tego samego arkusza stylów, rozmiar tekstu zostanie wystarczająco zmieniony tylko w tabeli, a na wszystkich stronach pojawi się żądany rozmiar.
Mimo że CSS doskonale nadaje się do tworzenia stylów tekstu, jest również przydatny do formatowania innych aspektów układu strony. Na przykład CSS może być użyty do określenia wypełnienia komórek tabeli, stylu, grubości i koloru obramowania, a także do wypełnienia elementów obrazu lub innych obiektów. CSS, w porównaniu z HTML, daje programistom bardziej precyzyjną kontrolę nad wyglądem stron internetowych.

Rodzaje zapytań multimedialnych

Rodzaje mediów opisują ogólną kategorię urządzenia. Chociaż strony internetowe są zwykle oparte na ekranach, programista może tworzyć style zaprojektowane dla specjalnych urządzeń, takich jak drukarki lub edytory audio. Na przykład ten fragment CSS jest przeznaczony dla drukarek: @media print {}. Możesz także kierować reklamy na wiele urządzeń. Na przykład ta reguła @media używa dwóch zapytań o media w celu kierowania na urządzenieekran i wydrukuj: ekran @media, wydrukuj {}.

Funkcje CSS Media

Funkcje multimedialne opisują specyficzne cechy klienta użytkownika, urządzenia wyjściowego lub środowiska. Na przykład możesz zastosować określone style do monitorów panoramicznych, komputerów lub urządzeń używanych w warunkach słabego oświetlenia. W tym przykładzie style są używane tam, gdzie główny mechanizm wejściowy użytkownika (na przykład mysz) może wisieć nad elementami: @media (hover: hover) {}. Wiele funkcji multimedialnych to funkcje pasma, co oznacza, że ​​mogą mieć przedrostek "min" lub "max-" do wyrażania minimalnych lub maksymalnych ograniczeń. Na przykład to polecenie zastosuje style tylko wtedy, gdy szerokość ekranu przeglądarki jest równa lub mniejsza niż 12450 px: @media (maksymalna szerokość: 12450px) {}. Jeśli utworzysz żądanie funkcji multimedialnej bez określania wartości, zagnieżdżone style będą używane, dopóki wartość funkcji nie będzie równa zero. Na przykład ten kod CSS będzie stosowany do dowolnego urządzenia z ekranem kolorowym: @media (color) {}. Jeśli funkcja nie dotyczy urządzenia, na którym działa przeglądarka, wyrażenia zawierające tę funkcję multimedialną są zawsze błędne. Na przykład style dołączone do następującego zapytania nigdy nie będą używane, ponieważ żadne urządzenie mowy nie ma formatu ekranu: @media speech i (proporcje: 11/5) {}.

Specyfikacja techniczna

Zapytania o media są kluczowym elementem projektowania adaptacyjnego, który pozwala dostosować CSS na podstawie różnych parametrów lubcharakterystyka urządzenia. Na przykład żądanie multimedialne może stosować różne style, jeśli ekran jest mniejszy niż określony rozmiar lub na podstawie tego, czy użytkownik zachowuje swoje urządzenie w trybie pionowym lub poziomym. Składnia żądań multimedialnych jest również używana w innych kontekstach, na przykład w atrybucie media elementu, który można skonfigurować za pomocą ciągu zapytania multimedialnego, aby użyć go do określenia, czy użyć tego źródła podczas wybierania określonego obrazu do użycia w elemencie. Do sprawdzenia okna na żądanie nośnika można użyć metody Window.matchMedia (). Możesz również zastosować funkcję MediaQueryList.addListener (), aby ostrzec, gdy status zapytań zostanie zmieniony. Dzięki tej funkcji Twoja witryna lub aplikacja może reagować na konfigurację urządzenia, orientację lub zmiany stanu.

Żądania multimedialne dotyczące stylów stylów

Adaptacyjna strona internetowa napotkała powolne pobieranie treści. Teraz proces usuwania tej wady jest dobrze udokumentowany. Istnieje kilka sposobów, dzięki którym programiści używają go do lepszego pobierania treści i obrazów na różnych urządzeniach. Jednym z nich jest zastosowanie zapytań o media, które wywołują style interfejsu urządzenia na podstawie jego rozmiaru. W przeszłości programiści argumentowali, czy zapytania o media są najlepszym rozwiązaniem dla urządzeń mobilnych, a debaty te wciąż trwają. Obecnie oficjalnie uznaje się, że zapytania o media CSS (zapytania o media) są prostym i skutecznym sposobem wyświetlania różnych treści dla wielu urządzeń orazNajczęściej używane zapytania to te, które odnoszą się do wysokości i szerokości rzutni.

Wyzwanie użyciu zewnętrznego arkusza stylów

style CSS dla mediów zapytania najpierw sprawdzić typ nośnika na ciąg agenta użytkownika przed wyjazdem sprawdzić okno cechy fizyczne. Są reklamą CSS, którą można wywołać za pomocą zewnętrznego arkusza stylów. Połączenie zewnętrzne będzie wyglądało tak: Bezpośredni CSS sama rozmowa będzie wyglądać następująco: @media ekran i (min-width: 320px) i (max-width: 480px) {/* Wstaw tutaj swoje style}. Zapytania o media CSS nie są modułowe i dlatego mogą komplikować ich pracę. Żądanie elementu jest podobne do żądania wyświetlenia, ponieważ używa CSS pod pewnymi warunkami. Jednak te typy danych oparte na elementach, a nie przeglądarki, która nie jest obecnie obsługiwana w CSS3. Zapytania dotyczące elementów zyskują na popularności, zwłaszcza że uzupełniają zapytania o media CSS. Oznacza to, że oba mogą skończyć razem, tworząc modularne i elastyczne projekty.

przetwarzania obrazu

skalowania dla elastycznej konstrukcji - dość prosta. Jest jednak kilka kwestii, które należy rozwiązać. Jest to utrata komponentów kompresji i obrazów do umieszczania treści na mniejszych urządzeniach. Aby utworzyć obraz skalowany, wystarczy dodać następujący kod w arkuszu stylów: img {max-width: 100%; } Spowoduje to zmniejszenie obrazu do rozmiaru kontenera, który jest mniejszy niż szerokość obrazu. InstalacjaMaksymalna szerokość 100% oznacza, że ​​obraz nie wzrośnie bardziej niż jego rzeczywisty rozmiar. Jednak może to być problem, jeśli chodzi o miejscu wykonania, ponieważ w istocie dostarczyć pełnowymiarową obraz do każdego urządzenia. Nie ma na to łatwego rozwiązania, szczególnie jeśli pracujesz nad witryną z nieaktualnymi obrazami. Jednak Adaptive Images to wtyczka, która może zoptymalizować obrazy na podstawie rozmiarów ekranu. Adaptacyjna konstrukcja oparta na platformie Media Foundation Framework Foundation umożliwia również udostępnianie obrazów na podstawie rozmiarów ekranu. Podczas pracy z obrazami należy użyć SVG, czcionek internetowych, typu WWW i CSS.