Skapa en webbsida.
Senast uppdaterad den
27 apr. 2021
Du kan använda mediefrågor för att ange CSS-filer baserat på de egenskaper som har rapporterats för en enhet (responsiv design). Webbläsaren i enheten kontrollerar mediefrågan och använder motsvarande CSS-fil för att visa webbsidan.
Följande mediefråga anger t.ex. filen phone.css för enheter som har en bredd på 300–320 pixlar.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
För en utförlig introduktion till mediefrågor, se Don Booths artikel på Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
För mer information om mediefrågor från W3C, se www.w3.org/TR/css3-mediaqueries/.
Skapa en mediefråga
I Dreamweaver kan du skapa en mediefrågefil för hela webbplatsen eller en dokumentspecifik mediefråga.
Platsvid mediafrågeresurs
Anger visningsinställningar för alla sidor på din webbplats som inkluderar filen.
Den platsvidamediafrågeresursen fungerar som det centrala lagret för alla mediafrågor på din plats.Efter att du skapat denna resurs länkar du till den från sidor på din plats som behöver använda mediafrågorni resursen för sin display.
Dokumentspecifik mediafråga
Mediafrågan infogas direkt i dokumentet, och sidan visas baserat på den infogade mediafrågan.
Välj Ändra > Mediefrågor.
Gör något av följande:
För att skapa en platsvid mediafrågeresurs väljer du Site Wide Media Queries File.
Välj Det här dokumentet om du vill skapa en dokumentspecifik mediefråga.
Gör följande om du skapar en platsomfattande mediefråga:
Klicka på Ange.
Välj Skapa ny fil.
Ange ett namn på filen och klicka på OK.
Det är möjligt att vissa enheter inte rapporterar sin faktiska bredd.För att tvinga enheter att rapportera sin faktiska bredd, säkerställ att alternativet Force Devices To Report Actual Width är aktiverat.
Följande kod infogas i din resurs när du väljer detta alternativ.
<meta name="viewport" content="width=device-width">
Gör något av följande:
Klicka på "+" för att definiera egenskaperna för mediafrågeresursen.
Klicka på Default Presets om du vill börja med standard- förinställningar.
Välj rader i tabellen och redigera deras egenskaper med alternativen under Properties.
Beskrivning
Beskrivningen av enheten som CSS-resursen ska användas för.Till exempel telefon, TV eller bärbar dator.
Minsta bredd och maximal bredd
CSS-filen används för de enheter vars rapporterade bredd är inom de angivna värdena.
Obs!
Lämna rutan Minsta bredd eller Maximal bredd tom om du inte vill ange ett bestämt intervall för en enhet. Det är till exempel vanligt att lämna rutan Minsta bredd tom om målet är telefoner med en bredd på högst 320 pixlar.
CSS-fil
Välj Use Existing File och bläddra till CSS-resursen för enheten.
Om du vill ange en CSS-resurs som du ännu inte skapat väljer du Create New File.Ange namnet på CSS-filen.Filen skapas när du klickar på OK.
Klicka på OK.
En ny fil skapas för den platsomfattande mediefrågan. Spara den.
Platsvid mediafråga: För befintliga sidor, säkerställ att du inkluderar mediafrågeresursen på alla sidor i <head>-taggen.
Exempel på en mediafrågelänk där mediaquery_adobedotcom.css är den platsövergripande mediafrågeresursen för platsen www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Använda en befintlig mediefrågefil
Skapa en webbsida eller öppna en befintlig sida.
Välj Ändra > Mediefrågor.
Välj Platsomfattande mediefrågefil.
Klicka på Ange.
Välj Använd befintlig fil om du redan har skapat en CSS-fil med mediafrågan.
Klicka på Bläddra, navigera till filen och välj filen. Klicka på OK.
Välj Platsomfattande mediefrågefil.
För att tvinga enheter att rapportera sin verkliga bredd, se till att alternativet Tvinga enheter att rapportera verklig bredd är aktiverat.Följande kod infogas i din resurs när du väljer det här alternativet.
<meta name="viewport" content="width=device-width">
Klicka på OK.
Välj en annan webbplatsövergripande mediafrågefil
Använd den här proceduren för att ändra den platsövergripande mediafrågeresursen som du har angett i dialogrutan Mediafrågor.
Välj Plats > Hantera platser.
Välj din plats i listan i dialogrutan Hantera platser.
Klicka på Redigera. Dialogrutan Platskonfiguration öppnas.
Välj Lokal information på den vänstra panelen under Avancerade inställningar.
I Platsövergripande mediafrågeresurs på högra panelen klickar du på Bläddra för att välja CSS-resursen för mediafrågor.
Obs!
Att ändra den platsövergripande mediefrågefilen påverkar inte dokument som är länkade till en annan eller tidigare platsövergripande mediefrågefil.
Klicka på Spara.
Visa webbsidor baserat på mediafråga
Dimensioner som anges i en mediafråga visas i alternativen för knappen/fönsterstorleken Flerskärm.När du väljer en dimension från menyn ser du följande ändringar:
Vystorleken ändras så att den motsvarar de angivna dimensionerna. Ramstorleken för dokument ändras inte.
CSS-resursen som anges i mediafrågan används för att visa sidan.
Liknande innehåll
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
