Container en lay-outmodus voor lay-out configureren configuring-layout-container-and-layout-mode

Responsieve lay-out is een mechanisme om te realiseren responsief webontwerp. Hierdoor kan de gebruiker webpagina's maken met een indeling en afmetingen die afhankelijk zijn van de apparaten die de gebruikers gebruiken.

AEM realiseert responsieve lay-out voor uw pagina's gebruikend een combinatie mechanismen:

Met deze responsieve rastermechanismen kunt u:

De responsieve emulator configureren configuring-the-responsive-emulator

Hierdoor kunt u de responsieve Emulator op uw site.

Uw pagina-componenten registreren voor emulatie register-your-page-components-for-emulation

Als u wilt dat de emulator uw pagina's ondersteunt, moet u de paginacomponenten registreren. Zie Pagina-componenten registreren voor simulatie.

Apparaatgroepen opgeven specify-the-device-groups

Zie voor informatie over de apparaatgroepen die worden weergegeven in de lijst met apparaten van de emulator Apparaatgroepen opgeven.

Uw site koppelen aan de opgegeven apparaatgroepen link-your-site-to-the-specified-device-groups

Als u de emulator wilt opnemen, moet u uw site koppelen aan de apparaatgroepen. Zie De lijst met apparaten toevoegen (voor zowel de klassieke gebruikersinterface als de gebruikersinterface met aanraakfuncties).

Lay-outmodus voor uw site activeren activate-layout-mode-for-your-site

Deze procedures worden gebruikt om de Layout op uw site.

De onderbrekingspunten configureren configure-the-breakpoints

Onderbrekingspunten:

Ze kunnen worden gedefinieerd met behulp van CRXDE Lite of XML.

Onderbrekingspunten configureren met CRXDE Lite configuring-breakpoints-using-crxde-lite

Onderbrekingspunten configureren met XML configuring-breakpoints-using-xml

Onderbrekingspunten bevinden zich in de <jcr:content> van de .context.html in de juiste sjabloonmap (of inhoudsmap).

Een voorbeelddefinitie:

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

Een provider van responsieve informatie toevoegen add-a-responsive-information-provider

Kopieer het volgende cq:infoProviders knooppuntstructuur in uw bovenliggende paginacomponent:

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

Component resizing voor de pagina inschakelen enable-component-resizing-for-the-page

Deze procedures zijn vereist zodat u de grootte van componenten in de Layout in.

De container van de Lay-out instellen als HoofdParsys set-layout-container-as-main-parsys

Om hoofdparsys van uw pagina te plaatsen om een lay-outcontainer te zijn moet u parsys als bepalen:

wcm/foundation/components/responsivegrid

In één van beide:

De volgende twee voorbeelden illustreren de definitie:

Inclusief de responsieve CSS include-the-responsive-css

CSS voor onderbrekingspunten die MINDER gebruiken css-for-breakpoints-using-less

AEM gebruikt LESS om delen van noodzakelijke CSS te produceren, moeten deze voor uw projecten worden omvat.

U moet ook een clientbibliotheek om extra configuratie en functievraag te verstrekken. Het volgende LESS extract is een voorbeeld van het minimum u aan uw project moet toevoegen:

@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);
  }
}

De basisrasterdefinitie is te vinden onder:

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

Overwegingen bij opmaken styling-considerations

Componenten die zich in een responsieve container bevinden, worden vergroot of verkleind (samen met hun respectievelijke HTML DOM-elementen) op basis van de responsieve rastergrootte. Daarom wordt in deze omstandigheden aanbevolen definities van DOM-elementen met een vaste breedte (bevat) te vermijden (of bij te werken).

Bijvoorbeeld:

Compatibiliteit van afbeeldingen vergroten/verkleinen en aanpassen resizing-and-adaptive-image-compliance

Als u de grootte van een component in het raster wijzigt, worden de volgende listeners geactiveerd, indien van toepassing:

Als u de inhoud van een adaptieve afbeelding in een responsief raster op de juiste wijze wilt vergroten of verkleinen en bijwerken, moet u een afterEdit instellen op REFRESH_PAGE listener in de EditConfig bestand van elke opgenomen component.

Bijvoorbeeld:

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

Het mechanisme voor adaptieve afbeeldingen is beschikbaar via een script dat de selectie van de juiste afbeelding voor de huidige grootte van het venster bepaalt. De gebeurtenis wordt geactiveerd nadat de DOM gereed is of wanneer een specifieke gebeurtenis wordt ontvangen. De pagina moet momenteel worden vernieuwd om het resultaat van de actie van de gebruiker correct weer te geven.

De Containercomponent voor lay-out inschakelen voor pagina enable-the-layout-container-component-for-page

Met deze taken kunnen auteurs instanties van de Layout Container op de pagina.

De Containercomponent voor lay-out inschakelen voor paginabewerking enable-the-layout-container-component-for-page-editing

Auteurs kunnen meer responsieve rasters toevoegen aan de inhoudspagina's als u de component Layout Container voor uw pagina wilt inschakelen. U kunt dit doen door:

Het raster van de container van de layout configureren configure-the-grid-of-the-layout-container

U kunt het aantal beschikbare kolommen voor elke specifieke instantie van lay-outcontainer vormen: