Klicka på den visuella mediafrågebalken som motsvarar den mediafråga som du vill redigera.
Senast uppdaterad den
20 dec. 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. Baserat på dessa regler anpassas innehållet till olika förhållanden, som skärmstorlekar, webbläsarfönsterstorlekar, enhetsstorlekar och orientering samt upplösning.
Du kan lägga till mediefrågor med hjälp av regeln @media i din CSS. Du kan också 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 mediefrågor enkelt genom att använda:
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: Mediafrågor med max-width-villkor
Blå : Mediefrågor med både min-width- och max-width-villkor
Lila : Mediefrågor med min-width-villkor
Mediafrågorna som visas i CSS Designer-panelen är också märkta med dessa färger.
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 min-width-villkor visas inte det lila fältet.
Brytpunktsvärdena anges på fälten – min-width till vänster och max-width till höger på fältet.
A. Brytpunkter B. Fält för visuell mediefråga C. Ikon för Lägg till mediefråga D. Navigeringslist (scrubber)
Dölj eller visa visuella mediefrågor
Fältet för visuell mediefråga visas som standard i Live-vyn. För att dölja fältet använder du Växla visuellt mediefråga-fält 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 snäpper till vid brytpunkten.
Du kan också dra skjutreglaget till önskad brytpunkt.
För att ändra storlek på vyn till storleken på Dreamweaver-dokumentfönstret 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. Om du inte ser det grå området drar du skjutreglaget åt vänster.
- Välj alternativet Full bredd i rullgardinsmenyn längst ned i dokumentfönstret.
Om du inte ser det här alternativet drar du skjutreglaget för att minska storleken på webbsidan.
Redigera media queries visuellt
Storlekshandtag visas. För mediefrågor som har både min- och max-width-värden visas storlekshandtag på båda sidor av stapeln.
Dra handtagen till ö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. Antalet mediafrågor som uppdaterades visas tillsammans med bekräftelsemeddelandet.
För att ångra trycker du på Ctrl+Z (Win) eller Cmd+Z (Mac).
Alternativt kan du dubbelklicka på brytpunktsvärdena för att skriva in värdena med tangentbordet.
Lägg till nya mediafrågor
Dra skrubbern längs linjalen till önskad storlek.
Klicka på 
.
Alternativet max-width är markerat som standard i snabbmenyn som visas. Om du vill ange min-width eller min-max väljer du lämpligt alternativ i rullgardinslistan och väljer nödvändiga enheter.
Välj sedan en CSS-källa där mediafrå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.
Om du vill ångra trycker du på Ctrl+Z (Win) eller Cmd+Z (Mac).
Ta bort media queries
Högerklicka på motsvarande visuella mediafrågebalk.
Klicka på Ta bort och klicka sedan på den mediafråga som du vill ta bort.
Klicka på OK för att bekräfta att du vill ta bort alla mediafrågor och tillhörande väljare.
Om du vill ångra trycker du på Ctrl+Z (Win) eller Cmd+Z (Mac).
Visa kod för mediafrågor
Högerklicka på den önskade visuella mediafrågebalken och håll muspekaren över Gå till kod.
En lista över alla mediafrågor i det särskilda brytpunktsområdet tillsammans med filerna där de är deklarerade visas.
Klicka på den önskade mediafrågan för att navigera till motsvarande kod i kodvyn.
Om kodvyn inte är synlig växlas dokumentet till delad vy för att visa koden.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
