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

Responsieve Lay-outis een mechanisme om ontvankelijk Webontwerp te realiseren. Hierdoor kan de auteur van de inhoud 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 emulator inschakelen enabling-emulator

Het Archetype van het Projecten StandaardMalplaatje van de Plaatsworden reeds toegelaten om de mededinger te gebruiken. Als u uw eigen inhoud hebt ontwikkeld die niet op de Componenten van de Kern of archetype wordt gebaseerd, te zien gelieve het document Responsieve Ontwerpvoor details op hoe te om uw componenten te ontwikkelen terwijl het leveraging van deze eigenschappen.

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

de wijze van de Lay-out van 0} {staat u toe om de mededinger te gebruiken om de lay-out van uw inhoud voor verschillende apparaten aan te passen. De WKND steekproefplaats wordt reeds toegelaten voor Lay-out wijze. Voer de volgende stappen uit om uw eigen site in te schakelen.

Onderbrekingspunten configureren configure-breakpoints

Onderbrekingspunten zijn van essentieel belang voor een responsief ontwerp en definiëren hoe en wanneer de inhoud wordt aangepast aan het doelapparaat. Wees echter voorzichtig, want elk breekpunt dat u introduceert, zal extra werk voor uw auteurs genereren om de inhoud aan te passen. Vaak kunnen twee onderbrekingspunten volstaan, inclusief het standaardonderbrekingspunt dat er altijd is. Adobe raadt aan niet meer dan drie onderbrekingspunten te maken, inclusief de standaardwaarde, dat wil zeggen niet meer dan twee knooppunten onder cq:responsive/breakpoint .

Voor zowel nieuwe als bestaande projecten moeten onderbrekingspunten in overweging worden genomen.

Vanwege overerving hoeft u dit alleen te doen voor de basispagina van uw inhoud.

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> -sectie van .context.html onder de toepasselijke 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>

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

Het resizing van componenten op Lay-out wijze is een belangrijk deel van ontvankelijk ontwerp, dat op de WKND steekproefplaats kan worden gebruikt. Voer de volgende stappen uit om uw eigen site in te schakelen.

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, bepaal parsys als:

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 de bibliotheek van de a cliënttot stand brengen om extra configuratie en functievraag te verstrekken. Het volgende LESS extract is een voorbeeld van het minimum dat 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 definitie van het basisraster is te vinden onder:

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

Overwegingen bij opmaken styling-considerations

Componenten die in een responsieve container worden vastgehouden, 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 set to REFRESH_PAGE listener toevoegen aan het EditConfig -bestand van elke component in de 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

Voor een effectieve responsieve lay-out moet de auteur van de inhoud instanties van de component Layout Container naar de pagina kunnen slepen. Dit is al ingeschakeld voor de WKND-voorbeeldsite. Voer de volgende stappen uit om uw eigen site in te schakelen.

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 kolommen beschikbaar voor elke specifieke instantie van lay-outcontainer vormen door uw paginasjablonen uit te geven.