Konfigurera layoutbehållare och layoutläge configuring-layout-container-and-layout-mode

Responsiv layout är en mekanism för att förverkliga responsiv webbdesign. På så sätt kan användaren skapa webbsidor som har en layout och dimensioner som är beroende av vilka enheter som användarna använder.

AEM realiserar responsiv layout för dina sidor med en kombination av mekanismer:

Med dessa responsiva rutnätsmekanismer kan du:

Konfigurera den responsiva emulatorn configuring-the-responsive-emulator

Med den här aktiviteten kan du se den responsiva emulatorn på din plats.

Registrera dina sidkomponenter för emulering register-your-page-components-for-emulation

Om du vill att emulatorn ska ha stöd för dina sidor måste du registrera sidkomponenterna. Se Registrera sidkomponenter för simulering.

Ange enhetsgrupper specify-the-device-groups

Information om hur du anger enhetsgrupperna som visas i emulatorns enhetslista finns i Ange enhetsgrupper.

Länka platsen till de angivna enhetsgrupperna link-your-site-to-the-specified-device-groups

Om du vill inkludera emulatorn länkar du platsen till enhetsgrupperna. Se Lägga till enhetslistan (för både det klassiska och det pekoptimerade användargränssnittet).

Aktivera layoutläge för webbplatsen activate-layout-mode-for-your-site

Dessa procedurer används för att aktivera layoutläget på din plats.

Konfigurera brytpunkterna configure-the-breakpoints

Brytpunkter:

De kan definieras med CRXDE Lite eller XML.

Konfigurera brytpunkter med CRXDE Lite configuring-breakpoints-using-crxde-lite

Konfigurera brytpunkter med XML configuring-breakpoints-using-xml

Brytpunkter finns i avsnittet <jcr:content> i .context.html under lämplig mallmapp (eller innehållsmapp).

En exempeldefinition:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Lägg till en leverantör av responsiv information add-a-responsive-information-provider

Kopiera följande cq:infoProviders-nodstruktur till den överordnade sidkomponenten:

/libs/foundation/components/page/cq:infoProviders/responsive

Aktivera komponentstorleksändring för sidan enable-component-resizing-for-the-page

Dessa procedurer krävs så att du kan ändra storlek på komponenter i layoutläget.

Ange layoutbehållare som huvudparsys set-layout-container-as-main-parsys

Om du vill ange att huvudparsytan på sidan ska vara en layoutbehållare definierar du parsytorna som:

wcm/foundation/components/responsivegrid

I antingen

I följande två exempel illustreras definitionen:

Inkludera responsiv CSS include-the-responsive-css

CSS för brytpunkter med LESS css-for-breakpoints-using-less

AEM använder LESS för att generera delar av den CSS som behövs, och dessa måste inkluderas i dina projekt.

Du måste också skapa ett klientbibliotek för att kunna tillhandahålla ytterligare konfigurations- och funktionsanrop. Följande LESS-extrakt är ett exempel på det minsta som du måste lägga till i projektet:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

Basrutnätsdefinitionen finns under:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Fundera på formatering styling-considerations

Storleken på komponenter som finns i en responsiv behållare ändras (tillsammans med deras respektive HTML DOM-element) beroende på stödrastrets responsiva storlek. Därför bör du under dessa omständigheter undvika (eller uppdatera) definitioner av DOM-element med fast bredd (som finns).

Till exempel:

Storleksändring och adaptiv bildkompatibilitet resizing-and-adaptive-image-compliance

Om du ändrar storlek på en komponent i rutnätet utlöses följande avlyssnare om det är lämpligt:

Om du vill ändra storlek på och uppdatera innehållet i en adaptiv bild som ingår i ett responsivt stödraster måste du lägga till en afterEdit-uppsättning till REFRESH_PAGE-avlyssnare i EditConfig-filen för alla ingående komponenter.

Till exempel:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Den adaptiva bildmekanismen görs tillgänglig via ett skript som styr valet av rätt bild för fönstrets aktuella storlek. Den aktiveras när DOM är redo eller när en dedikerad händelse tas emot. För närvarande måste sidan uppdateras för att korrekt återspegla resultatet av användarens åtgärd.

Aktivera layoutbehållarkomponenten för sidan enable-the-layout-container-component-for-page

Med de här åtgärderna kan författare dra instanser av komponenten Layoutbehållare till sidan.

Aktivera layoutbehållarkomponenten för sidredigering enable-the-layout-container-component-for-page-editing

Om du vill att författare ska kunna lägga till fler responsiva rutnät på innehållssidorna måste du aktivera layoutbehållarkomponenten för sidan. Du kan göra detta med:

Konfigurera stödrastret för layoutbehållaren configure-the-grid-of-the-layout-container

Du kan konfigurera antalet kolumner som är tillgängliga för varje särskild instans av layoutbehållaren: