Konfigurera layoutbehållaren och layoutläget configuring-layout-container-and-layout-mode

Responsiv layout är en mekanism för att förverkliga responsiv webbdesign. Detta gör att innehållsförfattaren kan 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:

Aktivera emulatorn enabling-emulator

Project Archetype och Standard Site Template har redan aktiverats för att använda emulatorn. Om du har utvecklat ditt eget innehåll som inte är baserat på kärnkomponenterna eller arkitekturen kan du läsa dokumentet Responsiv design för mer information om hur du utvecklar dina komponenter samtidigt som du utnyttjar dessa funktioner.

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

Layout gör att du kan använda emulatorn för att justera layouten för ditt innehåll för olika enheter. WKND-exempelwebbplatsen har redan aktiverats för Layout-läget. Följ de här stegen för att aktivera din egen webbplats.

Konfigurera brytpunkter configure-breakpoints

Brytpunkter är viktiga för responsiv design och definierar hur och när innehåll justeras till målenheten. Var dock försiktig eftersom varje brytpunkt du lägger in genererar ytterligare arbete åt författarna så att de får plats med innehållet. Många gånger kan det räcka med två brytpunkter, inklusive den standardbrytpunkt som alltid finns där. Adobe rekommenderar att du inte skapar fler än tre brytpunkter, inklusive standardvärdet, dvs. inte fler än två noder under cq:responsive/breakpoint.

Brytpunkter bör beaktas både för nya och befintliga projekt.

På grund av arv behöver du bara göra detta för innehållets rotsida.

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>

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

Att ändra storlek på komponenter i Layout -läge är en viktig del av responsiv design, som kan användas i WKND-exempelwebbplatsen. Följ de här stegen för att aktivera din egen webbplats.

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

För effektiv responsiv layout måste innehållsförfattaren kunna dra instanser av komponenten Layoutbehållare till sidan. Detta är redan aktiverat för WKND-exempelwebbplatsen. Följ de här stegen för att aktivera din egen webbplats.

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 specifik instans av layoutbehållaren genom att redigera sidmallarna.