Utwórz nową stronę WWW.
Ostatnia aktualizacja
27 kwi 2021
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)">
Wyczerpujące wprowadzenie do zapytań multimedialnych można znaleźć w artykule Dona Bootha w Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Więcej informacji o zapytaniach o multimedia z W3C podano w www.w3.org/TR/css3-mediaqueries/.
Tworzenie zapytania o media
W programie Dreamweaver można utworzyć plik zapytań multimedialnych dla całej witryny lub zapytanie multimedialne specyficzne dla dokumentu.
Plik zapytań multimedialnych dla całej witryny
Określa ustawienia wyświetlania wszystkich stron w witrynie, które zawierają ten plik.
Plik zapytań multimedialnych dla całej witryny działa jako centralne repozytorium dla wszystkich zapytań multimedialnych w witrynie.Po utworzeniu tego pliku należy połączyć go ze stronami w witrynie, które muszą używać zapytań multimedialnych z tego pliku do wyświetlania.
Zapytanie multimedialne specyficzne dla dokumentu
Zapytanie multimedialne jest wstawiane bezpośrednio do dokumentu, a strona jest wyświetlana na podstawie wstawionego zapytania multimedialnego.
Wybierz polecenie Modyfikuj > Zapytania o media.
Wykonaj jedną z następujących czynności:
Aby utworzyć plik zapytań multimedialnych w całej witrynie, wybierz opcję Plik zapytań multimedialnych w całej witrynie.
Aby utworzyć plik zapytań o media dla konkretnego dokumentu, wybierz opcję Ten dokument.
W przypadku zapytania o media obowiązującego w całym serwisie wykonaj następujące czynności:
Kliknij przycisk Określ.
Wybierz opcję Utwórz nowy plik.
Podaj nazwę pliku i kliknij przycisk OK.
Możliwe jest, że niektóre urządzenia nie zgłaszają swojej rzeczywistej szerokości.Aby zmusić urządzenia do zgłaszania rzeczywistej szerokości, upewnij się, że opcja Wymuś na urządzeniach zgłaszanie rzeczywistej szerokości jest włączona.
Następujący kod jest wstawiany do pliku po wybraniu tej opcji.
<meta name="viewport" content="width=device-width">
Wykonaj jedną z następujących czynności:
Kliknij "+", aby zdefiniować właściwości pliku zapytania multimedialnego.
Kliknij opcję Domyślne ustawienia wstępne, jeśli chcesz rozpocząć od standardowych ustawień wstępnych.
Wybierz wiersze w tabeli i edytuj ich właściwości używając opcji w sekcji Właściwości.
Opis
Opis urządzenia, do którego plik CSS ma być używany.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.
Spostrzeżenie
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 i przejdź do pliku CSS urządzenia.
Jeśli chcesz określić plik CSS, który dopiero zamierzasz utworzyć, wybierz opcję Utwórz nowy plik.Wprowadź nazwę pliku CSS.Plik zostanie utworzony po naciśnięciu przycisku OK.
Kliknij przycisk OK.
W przypadku zapytania o media dla całego serwisu tworzony jest nowy plik. Zapisz ten plik.
Zapytanie multimedialne dla całej witryny: W przypadku istniejących stron upewnij się, że plik zapytania multimedialnego jest dołączony do wszystkich stron w tagu <head>.
Przykład łącza zapytania o media, w którym mediaquery_adobedotcom.css jest plikiem zapytania o media obejmującym całą witrynę www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Używanie istniejącego pliku zapytań o media
Utwórz stronę WWW lub otwórz istniejącą stronę z serwisu.
Wybierz polecenie Modyfikuj > Zapytania o media.
Wybierz opcję Plik zapytań o media dla całego serwisu.
Kliknij przycisk Określ.
Wybierz opcję Użyj istniejącego pliku, jeśli już utworzono plik CSS z zapytaniem o media.
Kliknij ikonę przeglądania, aby znaleźć i wybrać odpowiedni plik. Kliknij przycisk OK.
Wybierz opcję Plik zapytań o media dla całego serwisu.
Aby wymusić na urządzeniach zgłaszanie rzeczywistej szerokości, upewnij się, że opcja Wymuś na urządzeniach zgłaszanie rzeczywistej szerokości jest włączona.Następujący kod zostanie wstawiony do pliku po wybraniu tej opcji.
<meta name="viewport" content="width=device-width">
Kliknij przycisk OK.
Wybierz inny plik zapytań o media obejmujący całą witrynę
Użyj tej procedury, aby zmienić plik zapytań o media obejmujący całą witrynę, który został ustawiony w oknie dialogowym Zapytania o media.
Wybierz polecenie Serwis > Zarządzaj serwisami.
W oknie dialogowym Zarządzaj serwisami wybierz odpowiedni serwis.
Kliknij przycisk Edytuj. Zostanie wyświetlone okno dialogowe Konfiguracja serwisu.
W sekcji Ustawienia zaawansowane w panelu po lewej stronie wybierz opcję Informacje lokalne.
W sekcji Plik zapytań o media obejmujący całą witrynę w prawym panelu kliknij przycisk Przeglądaj, aby wybrać plik CSS zapytania o media.
Spostrzeżenie
Zmiana pliku zapytań o media obejmującego całą witrynę nie wpływa na dokumenty połączone z innym lub poprzednim plikiem zapytań o media obejmującym całą witrynę.
Kliknij przycisk Zapisz.
Wyświetlaj strony internetowe na podstawie zapytania o media
Wymiary określone w zapytaniu o media są wyświetlane w opcjach przycisku/rozmiaru okna Wieloekranowość.Po wybraniu wymiaru z menu widoczne są następujące zmiany:
Wielkość widoku ulegnie zmianie zgodnie z wybranymi wymiarami. Rozmiar ramki dokumentu nie ulegnie zmianie.
Plik CSS określony w zapytaniu o media jest używany do wyświetlenia strony.
Więcej podobnych
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
