Zapytania o media umożliwiają wybranie plików CSS odpowiednich do zgłaszanej specyfikacji urządzenia (jest tzw. projekt reagujący). 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.

Na przykład podane poniżej zapytanie o media określa, że w przypadku urządzeń o szerokości ekranu 300-320 pikseli należy użyć pliku phone.css.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

Obszerne wprowadzenie do tematyki zapytań o media zawiera artykuł Dona Bootha w serwisie Adobe Developer Center: www.adobe.com/go/learn_dw_medquery_don_pl.

Więcej informacji na temat zapytań o media zawiera strona organizacji W3C: www.w3.org/TR/css3-mediaqueries/.

Tworzenie zapytania o media

W programie Dreamweaver można tworzyć plik zapytań o media obowiązujący w całym serwisie albo zapytanie o media obowiązujące tylko w określonym dokumencie.

Plik zapytań o media dla całego serwisu

Określa ustawienia wyświetlania dotyczące wszystkich stron serwisu, które zawierają łącze do tego pliku.

Plik zapytań o media obowiązujący w odniesieniu do całego serwisu stanowi centralne repozytorium zapytań o media. Na tych stronach serwisu, które muszą używać zapytań o media w celu wyświetlenia zawartości, należy dodać łącza prowadzące do pliku zawierającego zapytania.

Zapytanie o media obowiązujące w konkretnym dokumencie

Zapytanie o media jest wstawiane bezpośrednio do dokumentu. Strona będzie wyświetlana zgodnie z wynikami wstawionego zapytania o media.

  1. Utwórz nową stronę WWW.

  2. Wybierz polecenie Modyfikuj > Zapytania o media.

  3. Wykonaj jedną z następujących czynności:

    • Aby utworzyć plik zapytań o media dla całego serwisu, wybierz opcję Plik zapytań o media dla całego serwisu.

    • Aby utworzyć plik zapytań o media dla konkretnego dokumentu, wybierz opcję Ten dokument.

  4. W przypadku zapytania o media obowiązującego w całym serwisie wykonaj następujące czynności:

    1. Kliknij przycisk Określ.

    2. Wybierz opcję Utwórz nowy plik.

    3. Podaj nazwę pliku i kliknij przycisk OK.

  5. Niektóre urządzenia mogą nie zgłaszać rzeczywistej szerokości. Aby wymusić zgłaszanie rzeczywistej szerokości, upewnij się, że zaznaczona została opcja Wymuszaj zgłaszanie rzeczywistej szerokości przez urządzenia.

    Po wybraniu tej opcji do pliku zostanie wstawiony następujący kod.

    <meta name="viewport" content="width=device-width">
  6. Wykonaj jedną z następujących czynności:

    • Kliknij ikonę „+”, aby zdefiniować właściwości pliku zapytania o media.

    • Jeśli chcesz wykorzystać standardowe ustawienia, kliknij opcję Domyślne ustawienia predefiniowane.

  7. Zaznacz wiersze tabeli i edytuj ich właściwości, korzystając z opcji w sekcji Właściwości.

    Opis

    Opis urządzenia, dla którego należy używać danego pliku CSS. Może to być np. telefon, telewizor, tablet itp.

    Min. szerokość / Maks. szerokość

    Plik CSS będzie używany na urządzeniach, które zgłoszą szerokość mieszczącą się w tym zakresie.

    Uwaga:

    Jeśli nie chcesz jawnie definiować zakresu urządzeń, pozostaw puste pole Min. szerokość albo Maks. szerokość. Często np. pozostawia się puste pole Min. szerokość, aby zdefiniować styl dla telefonów z ekranami nieprzekraczającymi szerokości 320 pikseli.

    Plik CSS

    Wybierz opcję Użyj istniejącego pliku. Odszukaj plik CSS przeznaczony dla danego urządzenia.

    Jeśli chcesz wybrać plik CSS, który nie został jeszcze utworzony, użyj opcji Utwórz nowy plik. Wpisz nazwę pliku CSS. Plik zostanie utworzony po naciśnięciu przycisku OK.

  8. Kliknij przycisk OK.

  9. W przypadku zapytania o media dla całego serwisu tworzony jest nowy plik. Zapisz ten plik.

(Zapytanie o media dla całego serwisu) W przypadku istniejących stron należy pamiętać o dołączeniu pliku zapytań o media w sekcji <head> każdej ze stron.

Przykład odsyłacza do pliku z zapytaniami o media. „Mediaquery_adobedotcom.css” to plik zapytań o media obowiązujący dla całego serwisu www.adobe.com/pl:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Używanie istniejącego pliku zapytań o media

  1. Utwórz stronę WWW lub otwórz istniejącą stronę z serwisu.

  2. Wybierz polecenie Modyfikuj > Zapytania o media.

  3. Wybierz opcję Plik zapytań o media dla całego serwisu.

  4. Kliknij przycisk Określ.

  5. Jeśli plik CSS z zapytaniem o media został już utworzony, wybierz opcję Użyj istniejącego pliku.

  6. Kliknij ikonę przeglądania, aby znaleźć i wybrać odpowiedni plik. Kliknij przycisk OK.

  7. Wybierz opcję Plik zapytań o media dla całego serwisu.

  8. Aby wymusić zgłaszanie rzeczywistej szerokości, upewnij się, że zaznaczona została opcja Wymuszaj zgłaszanie rzeczywistej szerokości przez urządzenia. Po wybraniu tej opcji do pliku zostanie wstawiony następujący kod.

    <meta name="viewport" content="width=device-width">
  9. Kliknij przycisk OK.

Wybieranie innego pliku zapytań o media dla całego serwisu

Poniższa procedura umożliwia zmianę pliku zapytań o media dla całego serwisu, ustawionego w oknie dialogowym Zapytania o media.

  1. Wybierz polecenie Serwis > Zarządzaj serwisami.

  2. W oknie dialogowym Zarządzaj serwisami wybierz odpowiedni serwis.

  3. Kliknij przycisk Edytuj. Zostanie wyświetlone okno dialogowe Konfiguracja serwisu.

  4. W sekcji Ustawienia zaawansowane w panelu po lewej stronie wybierz opcję Informacje lokalne.

  5. W panelu po prawej stronie, w sekcji Plik zapytań o media dla całego serwisu, kliknij przycisk Przeglądaj, aby wybrać plik CSS z zapytaniami.

    Uwaga:

    Zmiana pliku zapytań o media dla całego serwisu nie wpływa na dokumenty, w których umieszczono odsyłacze do innych lub starszych plików zapytań dla całego serwisu.

  6. Kliknij opcję Zapisz.

Wyświetlanie stron WWW zgodnie z wynikami zapytania o media

Wymiary określone w zapytaniu o media będą wyświetlane w opcjach przycisku/rozmiaru okna w trybie wieloekranowym. Po wybraniu rozmiaru z menu widoczne staną się następujące zmiany:

  • Wielkość widoku ulegnie zmianie zgodnie z wybranymi wymiarami. Rozmiar ramki dokumentu nie ulegnie zmianie.

  • Do wyświetlenia strony użyty zostanie plik CSS określony w zapytaniu o media.

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