Configuração do contêiner de layout e modo de layout configuring-layout-container-and-layout-mode

Layout responsivo é um mecanismo para realizar web design responsivo. Isso permite que o usuário crie páginas da Web que tenham um layout e dimensões dependentes dos dispositivos que seus usuários usam.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

Com esses mecanismos de grade responsivos você pode:

Configuração do emulador responsivo configuring-the-responsive-emulator

Essas tarefas permitem que você veja o Emulador no seu site.

Registrar os componentes da página para emulação register-your-page-components-for-emulation

Para habilitar o emulador para suportar suas páginas, você deve registrar os componentes da página. Consulte Registrar componentes de página para simulação.

Especificar os grupos de dispositivos specify-the-device-groups

Para especificar os grupos de dispositivos que aparecem na lista Dispositivos do emulador, consulte Especificando os grupos de dispositivos.

Vincule seu site aos grupos de dispositivos especificados link-your-site-to-the-specified-device-groups

Para incluir o emulador, você precisa vincular seu site aos grupos de dispositivos. Consulte Adicionar a lista de dispositivos (para a interface clássica e a interface otimizada para toque).

Ativar o modo de layout para seu site activate-layout-mode-for-your-site

Esses procedimentos são usados para ativar a variável Layout no seu site.

Configurar os pontos de interrupção configure-the-breakpoints

Pontos de interrupção:

Eles podem ser definidos usando CRXDE Lite ou XML.

Configuração de pontos de interrupção usando o CRXDE Lite configuring-breakpoints-using-crxde-lite

Configuração de pontos de interrupção usando XML configuring-breakpoints-using-xml

Os pontos de interrupção estão localizados dentro da variável <jcr:content> da seção .context.html na pasta de modelo (ou conteúdo) apropriada.

Uma definição de exemplo:

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

Adicionar um provedor de informações responsivo add-a-responsive-information-provider

Copie o seguinte cq:infoProviders estrutura de nó no componente da página pai:

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

Ativar o redimensionamento de componentes para a página enable-component-resizing-for-the-page

Esses procedimentos são necessários para que você possa redimensionar os componentes no Layout modo.

Definir Contêiner de Layout como Parsys Principal set-layout-container-as-main-parsys

Para definir o parsys principal de sua página como um contêiner de layout, você precisa definir o parsys como:

wcm/foundation/components/responsivegrid

Em qualquer uma das situações:

Os dois exemplos a seguir ilustram a definição:

Inclua o CSS responsivo include-the-responsive-css

CSS para pontos de interrupção usando MENOS css-for-breakpoints-using-less

AEM usa MENOS para gerar partes do CSS necessário, que precisam ser incluídas em seus projetos.

Você também precisará criar um biblioteca do cliente para fornecer configuração e chamadas de função adicionais. A seguinte extração MENOS é um exemplo do mínimo que você precisa adicionar ao seu projeto:

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

A definição da grade base pode ser encontrada em:

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

Considerações sobre estilo styling-considerations

Os componentes mantidos em um contêiner responsivo serão redimensionados (junto com seus respectivos elementos HTML DOM) de acordo com o tamanho da grade responsiva. Portanto, nessas circunstâncias, é recomendável evitar (ou atualizar) definições de elementos DOM de largura fixa (contidos).

Por exemplo:

Redimensionamento e conformidade com imagens adaptáveis resizing-and-adaptive-image-compliance

Qualquer redimensionamento de um componente na grade acionará os seguintes ouvintes, conforme apropriado:

Para redimensionar e atualizar adequadamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um afterEdit defina como REFRESH_PAGE ouvinte no EditConfig de cada componente contido.

Por exemplo:

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

O mecanismo de imagem adaptável é disponibilizado por meio de um script que controla a seleção da imagem correta para o tamanho atual da janela. Ele é ativado depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir adequadamente o resultado da ação do usuário.

Ativar o componente Contêiner de layout para a página enable-the-layout-container-component-for-page

Essas tarefas permitem que os autores arraste instâncias da variável Contêiner de layout na página.

Ativar o componente do contêiner de layout para edição de página enable-the-layout-container-component-for-page-editing

Para permitir que os autores adicionem outras grades responsivas às páginas de conteúdo, é necessário ativar o componente Contêiner de layout para a página. Você pode fazer isso usando:

Configurar a grade do Contêiner de layout configure-the-grid-of-the-layout-container

Você pode configurar o número de colunas disponíveis para cada instância específica do contêiner de layout: