Användarhandbok Avbryt

Skapa mediefrågor

 

 

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

En omfattande introduktion till mediefrågor finns i Don Booths artikel i Adobe Developer Center på www.adobe.com/go/learn_dw_medquery_don_se.

Mer information om mediefrågor från W3C finns på www.w3.org/TR/css3-mediaqueries/.

Skapa en mediefråga

I Dreamweaver kan du skapa en platsomfattande mediefrågefil eller en dokumentspecifik mediefråga.

Platsomfattande mediefrågefil

Anger visningsinställningar för alla sidor på webbplatsen som innehåller filen.

Den platsomfattande mediefrågefilen fungerar som en central databas för alla mediefrågor på webbplatsen. När du har skapat den här filen kan du länka till den från sidor på webbplatsen som måste använda mediefrågorna i filen för att de ska kunna visas.

Dokumentspecifik mediefråga

Mediefrågan infogas direkt i dokumentet, och sidan visas baserat på den infogade mediefrågan.

  1. Skapa en webbsida.

  2. Välj Ändra > Mediefrågor.

  3. Gör något av följande:

    • Välj Platsomfattande mediefrågefil om du vill skapa en platsomfattande mediefrågefil.

    • Välj Det här dokumentet om du vill skapa en dokumentspecifik mediefråga.

  4. Gör följande om du skapar en platsomfattande mediefråga:

    1. Klicka på Ange.

    2. Välj Skapa ny fil.

    3. Ange ett namn för filen och klicka på OK.

  5. Det kan hända att vissa enheter inte rapporterar sin faktiska bredd. Du kan tvinga enheter att rapportera sin faktiska bredd genom att välja alternativet Tvinga enheter att rapportera faktisk bredd.

    Följande kod infogas i filen när du väljer det här alternativet.

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  6. Gör något av följande:

    • Klicka på plustecknet (+) om du vill definiera egenskaper för mediefrågefilen.

    • Klicka på Standardförinställningar om du vill börja med standardförinställningarna.

  7. Välj rader i tabellen och redigera deras egenskaper med alternativen under Egenskaper.

    Beskrivning

    Beskrivning av enheten som CSS-filen 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

    Markera Använd befintlig fil och bläddra till CSS-filen för enheten.

    Om du vill ange en CSS-fil som du inte har skapat ännu väljer du Skapa ny fil. Ange ett namn på CSS-filen. Filen skapas när du klickar på OK.

  8. Klicka på OK.

  9. En ny fil skapas för den platsomfattande mediefrågan. Spara den.

Platsomfattande mediefråga: Observera att mediefrågefilen måste finnas med i <head>-koden för alla befintliga sidor.

Exempel på en mediefrågelänk där mediaquery_adobedotcom.css är den platsomfattande mediefrågefilen för webbplatsen www.adobe.com/se/:

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

Använda en befintlig mediefrågefil

  1. Skapa en webbsida eller öppna en befintlig sida.

  2. Välj Ändra > Mediefrågor.

  3. Välj Platsomfattande mediefrågefil.

  4. Klicka på Ange.

  5. Välj Använd befintlig fil om du redan har skapat en CSS-fil med mediefrågan.

  6. Klicka på Bläddra, navigera till filen och välj filen. Klicka på OK.

  7. Välj Platsomfattande mediefrågefil.

  8. Du kan tvinga enheter att rapportera sin faktiska bredd genom att välja alternativet Tvinga enheter att rapportera faktisk bredd. Följande kod infogas i filen när du väljer det här alternativet.

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  9. Klicka på OK.

Välja en annan platsomfattande mediefrågefil

Så här ändrar du den platsomfattande mediefrågefilen som du har angett i dialogrutan Mediefrågor:

  1. Välj Plats > Hantera platser.

  2. Välj din plats i listan i dialogrutan Hantera platser.

  3. Klicka på Redigera. Dialogrutan Platskonfiguration öppnas.

  4. Välj Lokal information på den vänstra panelen under Avancerade inställningar.

  5. Klicka på Bläddra på den högra panelen i Platsomfattande mediefrågefil och välj CSS-mediefrågefilen.

    Obs!

    Ändringarna i den platsomfattande mediefrågefilen påverkar inte dokumenten som är länkade till en annan eller tidigare platsomfattande mediefrågefil.

  6. Klicka på Spara.

Visa webbsidor baserat på mediefråga

Dimensionerna som har angetts i en mediefråga visas i alternativen för Flera skärmar-knappen/fönsterstorlek. När du väljer en dimension på menyn visas följande ändringar:

  • Vystorleken ändras så att den motsvarar de angivna dimensionerna. Ramstorleken för dokument ändras inte.

  • CSS-filen som har angetts i mediefrågan används för att visa sidan.

Få hjälp snabbare och enklare

Ny användare?