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

Responsiv layout är en mekanism för att implementera 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 de här åtgärderna kan du se de responsiva Emulator på din webbplats.

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 Registrerar 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 måste du länka din plats till enhetsgrupperna. Se Lägga till enhetslistan (för både det klassiska och pekoptimerade användargränssnittet).

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

Dessa procedurer används för att aktivera Layout läge på din webbplats.

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

Brytpunkterna finns innanför <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 i 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 Layout läge.

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

Om du vill ange att huvudparsytan på sidan ska vara en layoutbehållare måste du definiera parametrarna som:

wcm/foundation/components/responsivegrid

I något av följande:

I följande två exempel visas 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 en klientbibliotek för att tillhandahålla ytterligare konfigurations- och funktionsanrop. Följande LESS-extrakt är ett exempel på det minsta du behöver lägga till i ditt projekt:

@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) enligt den responsiva stödrasterstorleken. 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 rutnät måste du lägga till en afterEdit ange till REFRESH_PAGE avlyssnare i EditConfig fil 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 dessa uppgifter kan författare dra instanser av Layoutbehållare på 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: