Skapa och använda mediefrågor i Dreamweaver

Senast uppdaterad den 2 maj 2021

Använd visuella mediefrågor för att visa och redigera webbsidor vid olika brytpunkter som motsvarar olika skärmstorlekar.

Mediefrågor är en CSS3-modul där du kan designa responsiva webbplatser genom att definiera olika formatregler för olika enheter och medietyper. Utifrån de här reglerna återges och anpassas innehållet efter olika villkor, som skärmstorlekar, storlek på webbläsarfönster, enhetsstorlek och -orientering samt upplösning.

Du kan lägga till mediefrågor med hjälp av regeln @media i din CSS. Eller så kan du skapa separata formatmallar för olika medietyper och sedan anropa dem med följande syntax:

<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' />

Webbläsaren i enheten kontrollerar mediefrågan och använder motsvarande CSS-fil för att visa webbsidan.

Mer information finns i den här artikeln.

Du kan lägga till mediefrågor genom att lägga till den relevanta koden i dina HTML- eller CSS-filer. Dessutom låter Dreamweaver dig skapa och hantera mediefiler enkelt med:

Skillnaden mellan de här två sätten ligger i det visuella. Om du föredrar att koda och sedan visa ändringarna i Live-vyn använder du CSS Designer. Om du hellre vill se sidan med olika brytpunkter och samtidigt göra designändringar är det bättre att använda visuell mediefråga.

Fält för visuell mediefråga

Fälten för visuell mediefråga är en visuell representation av de mediefrågor som finns på en sida. Med de här fälten blir det lättare för dig att se webbsidan med olika brytpunkter och se hur olika delar av webbsidan formateras på nytt i olika visningsrutor. När du visar sidan i olika visningsrutor kan du göra designändringar för en viss visningsruta utan att siddesignen i andra visningsrutor påverkas.

Visuell mediefråga består av tre fält i form av vågräta rader, där varje rad representerar en kategori mediefrågor:

Grön: mediefrågor med max-width-villkor
Blå: mediefrågor med både min-width- och max-width-villkor
Lila: mediefrågor med min-width-villkor

Obs!

Mediefrågorna som visas i CSS Designer-panelen har också de här färgerna.

Varje kategori kan bestå av en eller flera mediefrågor. Om ett villkor i en mediefråga inte är definierat i dokumentet visas heller inte motsvarande stapel för den visuella mediefrågan. Om dokumentet till exempel inte innehåller villkor för minsta bredd visas inte den lila stapeln.

Brytpunktsvärdena visas på staplarna. Minsta bredd är till vänster och största bredd är till höger om stapeln.

A. Brytpunkter B. Fält för visuell mediefråga C. Ikon för Lägg till mediefråga D. Navigeringslist (scrubber)

Dölja eller visa visuella mediefrågor

Fältet för visuell mediefråga visas som standard i Live-vyn. Om du vill dölja fältet använder du växlingsknappen för att visa/dölja fält för visuella mediefrågor i verktygsfältet.

Växla mellan brytpunkter

Om du vill visa sidan i en särskild storlek (brytpunkt) klickar du på motsvarande mediefrågefält: Dokumentet fästs vid brytpunkten.

Du kan även dra navigeringslisten till önskad brytpunkt.

Om du vill ändra vyns storlek till samma storlek som dokumentfönstret i Dreamweaver gör du något av följande:

Dubbelklicka var som helst i det grå området till höger om dokumentet där texten Dubbelklicka för att anpassa bredd visas. Dra navigeringslisten till vänster om det grå området inte visas.
Välj alternativet Full bredd i listrutan längst ned i dokumentfönstret.

Om det här alternativet inte visas drar du navigeringslisten och minskar webbsidans storlek.

Redigera mediefrågor visuellt

Klicka på det fält för visuell mediefråga som motsvarar den mediefråga du vill redigera.

Storlekshandtag visas. För mediefrågor som har värden för både min och max-width visas storlekshandtag på båda sidor om fältet.

Ändra storlek på handtag
Dra i handtagen för att få önskad storlek.

Mediefrågorna uppdateras automatiskt med de nya värdena för min-width och/eller max-width. Ett meddelande om att mediefrågan redigerats visas. Om det finns flera mediefrågor som motsvarar fältet för visuell mediefråga så uppdateras alla mediefrågor. Det antal mediefrågor som uppdaterades visas tillsammans med meddelandet.

Obs!

Du kan ångra genom att trycka på Ctrl+Z (Win) eller Cmd+Z (Mac).

Du kan också dubbelklicka på brytpunktsvärdena och skriva värden med tangentbordet.

Lägga till nya mediefrågor

Dra navigeringslisten längs linjalen för att få önskad storlek.
Klicka på .

Lägga till mediefrågor
Alternativet max-width är markerat som standard i popupen som visas. Välj min-width eller min-max genom att välja motsvarande alternativ i listrutan och välja önskat värde.

Välj sedan en CSS-källa där mediefrågan ska läggas till.

Om du väljer att skapa en ny CSS-fil visas ett annat fönster. Ange namn och sökväg för den nya CSS-filen och klicka på OK.

Obs!

Du kan ångra genom att trycka på Ctrl+Z (Win) eller Cmd+Z (Mac).

Ta bort mediefrågor

Högerklicka på motsvarande fält för visuell mediefråga.
Klicka på Ta bort och klicka sedan på den mediefråga du vill ta bort.
Klicka på OK för att bekräfta att du vill ta bort alla mediefrågor och tillhörande väljare.

Obs!

Du kan ångra genom att trycka på Ctrl+Z (Win) eller Cmd+Z (Mac).

Visa koden för mediefrågor

Högerklicka på önskat fält för visuell mediefråga och håll muspekaren ovanför Gå till kod.

Då visas en lista med alla mediefrågor i det särskilda brytpunktsintervallet tillsammans med filerna där de angetts.
Klicka på önskad mediefråga och navigera till motsvarande kod i kodvyn.

Om kodvyn inte visas växlas dokumentet över till delad vy för att visa koden.

Få hjälp snabbare och enklare

Ny användare?