Wizualne zapytania o media umożliwiają wyświetlanie i edytowanie strony w różnych punktach przerwań, odpowiadających różnym rozmiarom ekranu.

Zapytania o media to moduł specyfikacji CSS3, który ułatwia projektowanie reagujących serwisów WWW, ponieważ umożliwia definiowanie odmiennych reguł stylów dla różnych urządzeń lub typów mediów (nośników). Zawartość wyświetlana zgodnie z tak zdefiniowanymi regułami dostosowuje się do specyficznych warunków renderowania, takich jak wielkość ekranu, wielkość okna przeglądarki, rozmiar i orientacja urządzenia, a także rozdzielczość.

Zapytania o media w stylach CSS dodaje się za pomocą reguły @media. Można również utworzyć osobne arkusze stylów dla różnych typów mediów i wywoływać je za pomocą następującej składni:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

Przeglądarka na urządzeniu analizuje zapytanie o media, a następnie wyświetla stronę WWW, używając pliku CSS odpowiedniego do danego nośnika. 

Więcej informacji zawiera ten artykuł.

Zapytania o media można dodawać, wprowadzając odpowiedni kod do plików HTML lub CSS. Program Dreamweaver ułatwia ponadto tworzenie zapytań o media i zarządzanie nimi za pomocą następujących opcji:

Podstawową różnicą między tymi opcjami jest aspekt wizualny. Jeśli wolisz pisać kod, a potem wyświetlać wprowadzone zmiany w widoku aktywnym, skorzystaj z panelu Projektant CSS. Jeśli wolisz wyświetlać wizualizację strony na różnych etapach i jednocześnie wprowadzać zmiany układu, wygodniejsza będzie opcja wizualnych zapytań o media.

Paski wizualnych zapytań o media

Paski wizualnych zapytań o media stanowią graficzną reprezentację zapytań istniejących na stronie. Ułatwia to wizualizację strony WWW w różnych punktach przerwań oraz analizowanie sposobu reorganizacji układu poszczególnych elementów strony przy różnych wielkościach portu ekranowego. Wyświetlając stronę przy różnych wielkościach portu ekranowego, można wprowadzić zmiany projektu odpowiednie dla konkretnej wielkości, nie wpływając na wygląd strony na innych ekranach.

Funkcja Wizualne zapytania o media składa się trzech pasków, wyświetlanych w postaci trzech poziomych rzędów. Każdy z nich odpowiada jednej kategorii zapytań o media:

  • Zielony: zapytania o media z warunkami max-width
  • Niebieski: zapytania o media z warunkami min-width oraz max-width
  •  Fioletowy: zapytania o media z warunkami min-width

Uwaga:

Zapytania o media wyświetlone w panelu Projektant CSS również są poprzedzone tymi kolorami.

Każda kategoria może zawierać jedno lub więcej zapytań o media. Jeśli w dokumencie nie zdefiniowano zapytania o media uwzględniającego dany warunek, to nie zostanie wyświetlony pasek wizualnych zapytań o media dla takiego warunku. Na przykład w dokumencie, który nie zawiera warunków minimalnej szerokości (min-width), nie będzie wyświetlany fioletowy pasek zapytań.

Na paskach są podane wartości punktów przerwań: min-width po lewej stronie (określa szerokość minimalną) oraz max-width po prawej stronie paska (określa szerokość maksymalną).

Wartości punktów przerwań
Wartości punktów przerwań

A. Punkty przerwań B. Paski wizualnych zapytań o media C. Ikona Dodaj zapytanie o media D. Scrubber 

Wyświetlanie lub ukrywanie wizualnych zapytań o media

W widoku aktywnym pasek wizualnych zapytań o media jest domyślnie widoczny. Aby go ukryć, skorzystaj z przycisku Przełącz pasek wizualnych zapytań o media, dostępny na pasku narzędziowym.

Przełączanie między punktami przerwań

Aby wyświetlić stronę w określonym punkcie przerwań (czyli w wersji dla określonej wielkości), kliknij odpowiedni pasek zapytań o media. Dokument zostanie przyciągnięty do wartości określonej w punkcie przerwania.

Można również przeciągnąć scrubber na pozycję odpowiadającą danemu punktowi przerwań.

Aby dostosować wyświetlany rozmiar do wielkości okna programu Dreamweaver, wykonaj jedną z następujących czynności:

  • Dwukrotnie kliknij w obrębie szarego pola po prawej stronie dokumentu (tam, gdzie znajduje się napis „Kliknij dwukrotnie, aby zmieścić na szerokość”). Jeśli to szare pole nie jest widoczne, przeciągnij scrubber w lewo.
  • Wybierz opcję Pełna szerokość z rozwijanej listy na dole dokumentu.
Zmiana rozmiaru widoku
Zmiana rozmiaru widoku

Jeśli opcja ta nie jest widoczna, przeciągnij scrubber, aby zmniejszyć rozmiar strony WWW.

Edytowanie zapytań o media metodą graficzną

  1. Kliknij pasek wizualnych zapytań o media odpowiadający zapytaniu, które chcesz zmodyfikować.

    Spowoduje to wyświetlenie uchwytów zmiany rozmiaru. W przypadku zapytań o media, dla których zdefiniowano zarówno wartość min-width (minimalna szerokość), jak i max-width (maksymalna szerokość), uchwyty zmiany rozmiaru pojawią się po obu stronach paska.

    Uchwyty zmiany rozmiaru
    Uchwyty zmiany rozmiaru

  2. Przeciągnij uchwyty, aby uzyskać wymagany rozmiar.

    Zapytania o media zostaną odpowiednio uaktualnione nowymi wartościami właściwości min-width oraz max-width. Pomyślna modyfikacja zapytania o media zostanie potwierdzona komunikatem wyświetlonym na ekranie. Jeśli paskowi wizualnych zapytań o media odpowiada więcej niż jedno zapytanie, to uaktualnione zostaną wszystkie takie zapytania. Liczba zmodyfikowanych zapytań o media zostanie podana w komunikacie potwierdzającym pomyślną modyfikację. 

Uwaga:

Aby cofnąć, naciśnij klawisze Ctrl+Z (Win) lub Cmd+Z (Mac).

Można również dwukrotnie kliknąć wartości punktów przerwań, aby wpisać je z klawiatury. 

Dodawanie nowych zapytań o media

  1. Przeciągnij scrubber po miarce, aby uzyskać wymagany rozmiar.

  2. Kliknij ikonę .

    Dodawanie zapytań o media
    Dodawanie zapytań o media

  3. W wyświetlonym okienku jest domyślnie wybrana opcja maksymalnej szerokości (max-width). Aby wybrać opcję minimalnej szerokości (min-width) lub minimalnej i maksymalnej szerokości (min-max), skorzystaj z rozwijanej listy i wybierz wymagane elementy.

    Następnie wybierz źródło CSS, do którego ma zostać dodane to zapytanie o media.

    Jeśli wybierzesz opcję utworzenia nowego pliku CSS, zostanie wyświetlone kolejne okienko. Określ nazwę i ścieżkę nowego pliku CSS, a następnie kliknij przycisk OK.

Uwaga:

Aby cofnąć, naciśnij klawisze Ctrl+Z (Win) lub Cmd+Z (Mac).

Usuwanie zapytań o media

  1. Kliknij prawym przyciskiem myszy na odpowiednim pasku wizualnego zapytania o media.

  2. Kliknij przycisk Usuń, a następnie kliknij zapytanie o media, które chcesz usunąć.

  3. Kliknij przycisk OK, aby potwierdzić, że chcesz usunąć wszystkie zapytania o media i powiązane selektory.

Uwaga:

Aby cofnąć, naciśnij klawisze Ctrl+Z (Win) lub Cmd+Z (Mac).

Wyświetlanie kodu zapytań o media

  1. Kliknij prawym przyciskiem myszy na odpowiednim pasku wizualnych zapytań o media i zatrzymaj kursor myszy nad przyciskiem Przejdź do kodu.

    Zostanie wyświetlona lista wszystkich zapytań o media w zasięgu danego punktu przerwań, a także plików, w których zapytania te zostały zadeklarowane.

  2. Kliknij odpowiednie zapytanie o media, aby przejść do jego kodu w widoku Kod.

    Jeśli widok Kod nie jest wyświetlony, dokument zostanie przełączony w widok Podziel, co pozwoli wyświetlić kod.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online