Responsiv design för webbsidor responsive-design-for-web-pages

Utforma dina webbsidor så att de anpassas till den klientvisningsruta där de visas. Med responsiv design kan samma sidor visas effektivt på flera enheter i båda riktningarna. I följande bild visas några sätt på vilka en sida kan reagera på ändringar i visningsrutans storlek:

Utveckla Adobe Experience Manager-program (AEM) som genererar HTML 5-sidor som anpassar sig efter olika fönsterstorlekar och orienteringar. Följande intervall med visningsrutebredder motsvarar till exempel olika enhetstyper och orienteringar

Mer information om hur du implementerar responsiva designbeteenden finns i följande avsnitt:

När du designar kan du använda Sidekick för att förhandsgranska sidorna för olika skärmstorlekar.

Innan du börjar utveckla before-you-develop

Innan du utvecklar det AEM programmet som stöder dina webbsidor bör du fatta flera designbeslut. Du måste till exempel ha följande information:

Programstruktur application-structure

Den typiska AEM programstrukturen har stöd för alla responsiva designimplementeringar:

Använda mediefrågor using-media-queries

Mediefrågor möjliggör selektiv användning av CSS-format för sidåtergivning. Med AEM utvecklingsverktyg och funktioner kan du effektivt och effektivt implementera mediefrågor i dina program.

W3C-gruppen tillhandahåller rekommendationen Mediefrågor som beskriver den här CSS3-funktionen och syntaxen.

Skapa CSS-filen creating-the-css-file

I CSS-filen definierar du mediefrågor baserat på egenskaperna för de enheter som du har som mål. Följande implementeringsstrategi är effektiv för att hantera format för varje mediefråga:

Medieexemplet We.Retail använder den här strategin för att definiera format i webbplatsdesignen. CSS-filen som används av We.Retail är på */apps/weretail/clientlibs/clientlib-site/less/grid.less.

I följande tabell visas filerna i css-mappen.

Filen css.txt i mappen /etc/designs/weretail/clientlibs visar de CSS-filer som finns i klientbiblioteksmappen. Filernas ordning tillämpar formatprioritet. Format är mer specifika när enhetens storlek minskar.

#base=css

style.css
 bootstrap.css

responsive-1200px.css
 responsive-980px-1199px.css
 responsive-768px-979px.css
 responsive-767px-max.css
 responsive-480px.css

Tips: Med beskrivande filnamn kan du enkelt identifiera målvisningsrutans storlek.

Använda mediefrågor med AEM sidor using-media-queries-with-aem-pages

Inkludera klientbiblioteksmappen i JSP-skriptet för sidkomponenten. Om du gör det kan du generera CSS-filen som innehåller mediefrågorna och refererar till filen.

<ui:includeClientLib categories="apps.weretail.all"/>

JSP-skriptet genererar följande HTML-kod som refererar till formatmallarna:

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

Förhandsgranska för specifika enheter previewing-for-specific-devices

Se förhandsgranskningar av sidorna i olika visningsrutestorlekar så att du kan testa beteendet i din responsiva design. I Preview-läget innehåller Sidekick en Devices-listruta som du använder för att välja en enhet. När du väljer en enhet ändras sidan så att den anpassas till visningsrutans storlek.

Om du vill aktivera enhetsförhandsvisningen i Sidekick måste du konfigurera sidan och tjänsten MobileEmulatorProvider. En annan sidkonfiguration styr listan över enheter som visas i listan Devices.

Lägga till enhetslistan adding-the-devices-list

Listan Devices visas i Sidekick när sidan innehåller JSP-skriptet som återger listan Devices. Om du vill lägga till listan Devices i Sidekick tar du med skriptet /libs/wcm/mobile/components/simulator/simulator.jsp i avsnittet head på sidan.

Inkludera följande kod i JSP som definierar avsnittet head:

<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>

Öppna filen /apps/weretail/components/page/head.jsp i CRXDE Lite om du vill se ett exempel.

Registrerar sidkomponenter för simulering registering-page-components-for-simulation

Om du vill att enhetssimulatorn ska stödja dina sidor registrerar du dina sidkomponenter med fabrikstjänsten MobileEmulatorProvider och definierar egenskapen mobile.resourceTypes.

När du arbetar med AEM finns det flera metoder för att hantera konfigurationsinställningarna för sådana tjänster. Mer information finns i Konfigurera OSGi.

Så här skapar du till exempel en [sling:OsgiConfig](/docs/experience-manager-65/content/implementing/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)-nod i ditt program:

Lägg till följande nodegenskap:

Ange enhetsgrupper specifying-the-device-groups

Om du vill ange de enhetsgrupper som visas i listan Enheter lägger du till en cq:deviceGroups-egenskap i noden jcr:content på webbplatsens rotsida. Värdet för egenskapen är en array med sökvägar till enhetsgruppsnoderna.

Enhetsgruppnoderna finns i mappen /etc/mobile/groups.

Rotsidan för Geometrixx Media-webbplatsen är till exempel /content/geometrixx-media. Noden /content/geometrixx-media/jcr:content innehåller följande egenskap:

Använd verktygskonsolen för att skapa och redigera enhetsgrupper.

Använda adaptiva bilder using-adaptive-images

Du kan använda mediefrågor för att välja en bildresurs som ska visas på sidan. Alla resurser som använder en mediefråga för att anpassa användningen hämtas dock till klienten. Mediefrågan avgör bara om den hämtade resursen visas.

När det gäller stora resurser som bilder är det inte effektivt att hämta alla resurser i kundens dataflöde. Om du vill hämta resurser selektivt använder du JavaScript för att initiera resursbegäran efter att mediefrågorna har utfört urvalet.

Följande strategi läser in en enskild resurs som väljs med hjälp av mediefrågor:

Utvärdera mediefrågor med JavaScript evaluating-media-queries-using-javascript

Implementeringar av MediaQueryList-gränssnittet som definieras av W3C gör att du kan utvärdera mediefrågor med JavaScript. Du kan lägga till logik i mediafrågeresultaten och köra skript som är avsedda för det aktuella fönstret:

Välja mediespecifika resurser selecting-media-specific-resources

W3C picture-elementet använder mediefrågor för att avgöra vilken källa som ska användas för bildelement. Bildelementet använder elementattribut för att associera mediefrågor med bildsökvägar.

Biblioteket 🔗 picturefill.js picture som är fritt tillgängligt har liknande funktioner som det föreslagna elementet och använder en liknande strategi. Biblioteket picturefill.js anropar window.matchMedia för att utvärdera de mediefrågor som har definierats för en uppsättning med div element. Varje div-element anger också en bildkälla. Källan används när mediefrågan för elementet div returnerar true.

Biblioteket picturefill.js kräver HTML-kod som liknar följande exempel:

<div data-picture>
    <div data-src='path to default image'></div>
    <div data-src='path to small image'    data-media="(media query for phone)"></div>
    <div data-src='path to medium image'   data-media="(media query for tablet)"></div>
    <div data-src='path to large image'     data-media="(media query for monitor)"></div>
</div>

När sidan återges infogar picturefull.js ett img-element som det sista underordnade elementet i <div data-picture> -elementet:

<div data-picture>
    <div data-src='path to default image'></div>
    <div data-src='path to small image'    data-media="(media query for phone)"></div>
    <div data-src='path to medium image'   data-media="(media query for tablet)"></div>
    <div data-src='path to large image'     data-media="(media query for monitor)"></div>
    <img src="path to medium image">
</div>

På en AEM sida är värdet för attributet data-src sökvägen till en resurs i databasen.

Implementera adaptiva bilder i AEM implementing-adaptive-images-in-aem

Om du vill implementera adaptiva bilder i ditt AEM måste du lägga till de nödvändiga JavaScript-biblioteken och inkludera den nödvändiga HTML-koden på sidorna.

Bibliotek

Hämta följande JavaScript-bibliotek och inkludera dem i en klientbiblioteksmapp:

Tips! Du kan automatiskt sammanfoga flera klientbiblioteksmappar genom att bädda in.

HTML

Skapa en komponent som genererar de div-element som förväntas av koden picturefill.js. På en AEM sida är värdet för data-src-attributet sökvägen till en resurs i databasen. En sidkomponent kan till exempel hårdkoda mediefrågor och de associerade sökvägarna för bildåtergivningar i DAM. Du kan också skapa en anpassad bildkomponent som gör att författare kan välja bildåtergivningar eller ange alternativ för körtidsåtergivning.

I följande exempel väljs HTML från två DAM-renderingar av samma bild.

<div data-picture>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png'    data-media="(min-width: 769px)"></div>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png'   data-media="(min-width: 481px)"></div>
</div>

Bildåtergivning i AEM understanding-image-rendering-in-aem

Om du vill anpassa bildåtergivning bör du känna till standardimplementeringen AEM statisk bildåtergivning. AEM innehåller bildkomponenten och en bildåtergivningsservett som fungerar tillsammans för att återge bilder för webbsidor. Följande händelsesekvenser inträffar när bildkomponenten inkluderas i sidans styckesystem:

JSP för komponenten Image genererar till exempel följande HTML-element:

<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">

När webbläsaren läser in sidan begär den bilden med hjälp av src-attributets värde som URL. Sling bryter URL-adressen:

Noden image_0 har värdet jcr:resourceType, foundation/components/image, som har värdet sling:resourceSuperType foundation/components/parbase. Parbase-komponenten innehåller skriptet img.GET.java som matchar väljaren och filnamnstillägget för begärande-URL:en. CQ använder det här skriptet (servlet) för att återge bilden.

Använd CRXDE Lite för att öppna /libs/foundation/components/parbase/img.GET.java om du vill se skriptets källkod
-fil.

Skalförändra bilder för den aktuella visningsrutans storlek scaling-images-for-the-current-viewport-size

Skala bilder vid körning enligt egenskaperna för klientens visningsruta för att tillhandahålla bilder som följer principerna för responsiv design. Använd samma designmönster som statisk bildåtergivning, med en servett och en redigeringskomponent.

Komponenten måste utföra följande uppgifter:

Servern som bearbetar bildbegäran måste utföra följande uppgifter:

Tillgängliga lösningar

AEM installerar följande implementeringar som du kan använda eller utöka.

Förstå komponenten Adaptiv bild understanding-the-adaptive-image-component

Komponenten Adaptiv bild genererar anrop till adaptiv bildkomponentserver för att återge en bild som har samma storlek som enhetsskärmen. Komponenten innehåller följande resurser:

Lägga till DIV-element adding-the-div-elements

Skriptet adaptive-image.jsp innehåller följande kod som genererar div-element och mediefrågor:

<div data-picture data-alt='<%= alt %>'>
    <div data-src='<%= path + ".img.320.low." + extension + suffix %>'       data-media="(min-width: 1px)"></div>                                        <%-- Small mobile --%>
    <div data-src='<%= path + ".img.320.medium." + extension + suffix %>'    data-media="(min-width: 320px)"></div>  <%-- Portrait mobile --%>
    <div data-src='<%= path + ".img.480.medium." + extension + suffix %>'    data-media="(min-width: 321px)"></div>  <%-- Landscape mobile --%>
    <div data-src='<%= path + ".img.476.high." + extension + suffix %>'      data-media="(min-width: 481px)"></div>   <%-- Portrait iPad --%>
    <div data-src='<%= path + ".img.620.high." + extension + suffix %>'      data-media="(min-width: 769px)"></div>  <%-- Landscape iPad --%>
    <div data-src='<%= path + ".img.full.high." + extension + suffix %>'     data-media="(min-width: 1025px)"></div> <%-- Desktop --%>

    <%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
    <noscript>
        <img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
    </noscript>
</div>

Variabeln path innehåller sökvägen för den aktuella resursen (komponentnoden adaptive-image). Koden genererar en serie med div element med följande struktur:

<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>

Värdet för attributet data-scr är en URL som Sling löser till den Adaptive Image Component Server som återger bilden. Attributet data-media innehåller den mediefråga som utvärderas mot klientegenskaperna.

Följande HTML-kod är ett exempel på div-element som JSP genererar:

<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg'    data-media="(min-width: 320px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg'    data-media="(min-width: 321px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg'     data-media="(min-width: 481px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg'     data-media="(min-width: 769px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg'     data-media="(min-width: 1025px)"></div>

Ändra bildstorleksväljare changing-the-image-size-selectors

Om du anpassar den adaptiva bildkomponenten och ändrar breddväljarna måste du även konfigurera den adaptiva bildkomponentservern så att den stöder bredderna.

Förstå komponentservern för adaptiv bild understanding-the-adaptive-image-component-servlet

Servleten Adaptive Image Component ändrar storlek på en JPEG-bild enligt en angiven bredd och ställer in JPEG-kvaliteten.

Gränssnittet för den adaptiva bildkomponentservern the-interface-of-the-adaptive-image-component-servlet

Adaptive Image Component Server är bunden till standardservern Sling och stöder filtilläggen .jpg, .jpeg, .gif och .png. Serverväljaren är img.

Sling löser därför URL:er för HTTP-begäran i följande format till den här servern:

*path-to-node*.img.*extension*

Till exempel Sling forwards HTTP-begäranden med URL:en http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg till Adaptive Image Component Server.

Två ytterligare väljare anger önskad bildbredd och JPEG-kvalitet. I följande exempel efterfrågas en bild med bredden 480 pixlar och medelkvaliteten:

http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg

Bildegenskaper som stöds

Servern accepterar ett begränsat antal bildbredder och -egenskaper. Följande bredder stöds som standard (i pixlar):

Det fullständiga värdet anger ingen skalförändring.

Följande värden för JPEG-kvalitet stöds:

De numeriska värdena är 0,4, 0,82 och 1,0.

Ändra standardbredderna som stöds

Använd webbkonsolen (http://localhost:4502/system/console/configMgr) eller en sling:OsgiConfig-nod för att konfigurera bredderna som stöds i Adobe CQ Adaptive Image Component Server.

Mer information om hur du konfigurerar AEM tjänster finns i Konfigurera OSGi.

Implementeringsinformation implementation-details

Klassen com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet utökar klassen AbstractImageServlet . Källkoden för AdaptiveImageComponentServer finns i mappen /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl.

Klassen använder Felix SCR-anteckningar för att konfigurera resurstypen och filtillägget som serverleten är associerad med och namnet på den första väljaren.

@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
        description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
    @Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
    @Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
    @Property(name = "sling.servlet.extensions", value ={
            "jpg",
            "jpeg",
            "png",
            "gif"
    }, propertyPrivate = true)
})

Servottleten använder Property SCR-anteckningen för att ange bildkvalitet och dimensioner som stöds som standard.

@Property(value = {
            "320", // iPhone portrait
            "480", // iPhone landscape
            "476", // iPad portrait
            "620" // iPad landscape
    },
            label = "Supported Widths",
            description = "List of widths this component is permitted to generate.")

Klassen AbstractImageServlet innehåller metoden doGet som bearbetar HTTP-begäran. Den här metoden avgör vilken resurs som är associerad med begäran, hämtar resursegenskaper från databasen och returnerar dem i ett ImageContext -objekt.

Klassen AdaptiveImageComponentServlet åsidosätter metoden createLayer. Metoden hämtar sökvägen för bildresursen och den begärda bildbredden från objektet ImageContext. Därefter anropas metoderna för klassen info.geometrixx.commons.impl.AdaptiveImageHelper som utför den faktiska bildskalningen.

Klassen AdaptiveImageComponentServer åsidosätter också writeLayer-metoden. Med den här metoden används bildens JPEG-kvalitet.

Image Reference Modification Server (Geometrixx Common) image-reference-modification-servlet-geometrixx-common

Exemplet Image Reference Modification Server genererar storleksattribut för img-elementet för att skala en bild på webbsidan.

Anropa serverleten calling-the-servlet

Servern är bunden till cq:page resurser och stöder filtillägget .jpg. Serverväljaren är image. Sling löser därför URL:er för HTTP-begäran i följande format till den här servern:

path-to-page-node.image.jpg

Exempel: Sling vidarebefordrar HTTP-begäranden med URL:en http://localhost:4502/content/geometrixx/en.image.jpg till Image Reference Modification Server.

Tre ytterligare väljare anger den önskade bildens bredd, höjd och (valfritt) kvalitet. I följande exempel efterfrågas en bild med bredden 770 pixlar, höjden 360 pixlar och medelkvaliteten.

http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg

Bildegenskaper som stöds

Servern accepterar ett begränsat antal bilddimensioner och kvalitetsvärden.

Följande värden stöds som standard (widthXheight):

Följande värden för bildkvalitet stöds:

När du arbetar med AEM finns det flera metoder för att hantera konfigurationsinställningarna för sådana tjänster. Mer information finns i Konfigurera OSGi.

Ange bildresursen specifying-the-image-resource

Bildsökvägen, dimensionerna och kvalitetsvärdena måste lagras som egenskaper för en nod i databasen:

När du redigerar en sida använder du Sidekick för att ange bilden och lägga till noden image i sidegenskaperna:

Implementeringsinformation implementation-details-1

Klassen info.geometrixx.Commons.impl.servlets.ImageReferenceModificationServlet utökar klassen AbstractImageServlet. Om du har installerat paketet cq-geometrixx-Commons-pkg finns källkoden för ImageReferenceModificationServlet i mappen /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets.

Klassen använder Felix SCR-anteckningar för att konfigurera resurstypen och filtillägget som serverleten är associerad med och namnet på den första väljaren.

@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
        description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
    @Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
    @Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
    @Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})

Servottleten använder Property SCR-anteckningen för att ange bildkvalitet och dimensioner som stöds som standard.

@Property(label = "Image Quality",
            description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
                "256x192", // Category page article list images
                "370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
                "480x200", // "Most popular" phone
                "127x127", // article summary phone square images
                "770x360", // article summary, desktop
                "620x290", // article summary, tablet
                "480x225", // article summary, phone (landscape)
                "320x150", // article summary, phone (portrait) and fallback
                "375x175", // 2-column article summary, desktop
                "303x142", // 2-column article summary, tablet
                "1170x400", // carousel, full
                "940x340",  // carousel min-width: 980px
                "770x300",  // carousel min-width: 768px
                "480x190"   // carousel min-width: 480px
            },
            label = "Supported Resolutions",
            description = "List of resolutions this component is permitted to generate.")

Klassen AbstractImageServlet innehåller metoden doGet som bearbetar HTTP-begäran. Den här metoden avgör vilken resurs som är associerad med anropet, hämtar resursegenskaper från databasen och sparar dem i ett ImageContext -objekt.

Klassen ImageReferenceModificationServlet åsidosätter metoden createLayer och implementerar logiken som bestämmer vilken bildresurs som ska återges. Metoden hämtar en underordnad nod till sidans jcr:content-nod med namnet image. Ett Bild-objekt skapas från den här image-noden och metoden getFileReference returnerar sökvägen till bildfilen från bildnodens fileReference-egenskap.

Utveckla ett flytande stödraster developing-a-fluid-grid

AEM gör det möjligt att effektivt implementera flytande stödraster. På den här sidan beskrivs hur du kan integrera ditt flytande stödraster eller en befintlig stödrasterimplementering (till exempel Bootstrap) i ditt AEM.

Om du inte känner till flytande stödraster läser du avsnittet Introduktion till flytande stödraster längst ned på den här sidan. Den här introduktionen ger en översikt över flytande stödraster och riktlinjer för hur du utformar dem.

Definiera stödrastret med en sidkomponent defining-the-grid-using-a-page-component

Använd sidkomponenter för att generera de element i HTML som definierar innehållsblocken på sidan. ClientLibraryFolder som sidreferensen refererar till innehåller CSS som styr layouten för innehållsblocken:

Exempelprogrammet för geometrixx-media innehåller exempelvis mediahemkomponenten. Den här sidkomponenten infogar två skript som genererar två div element av klassen row-fluid:

<div class="page-content">
    <div class="row-fluid">
        <div class="span12">
            <cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
        </div>
        <div class="span4">
            <cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
</div>

Skalförändra sidkomponentens stödraster scaling-the-page-component-grid

Designen som är associerad med sidkomponenten geometrixx-media (/etc/designs/geometrixx-media) innehåller clientlibs ClientLibraryFolder. Den här ClientLibraryFolder definierar CSS-format för row-fluid-klasser, span*-klasser och span*-klasser som är underordnade row-fluid-klasser. Mediefrågor gör att format kan definieras om för olika visningsrutestorlekar.

Följande exempel på CSS är en deluppsättning av dessa format. Den här delmängden fokuserar på klasserna span12, span8 och span4 samt på mediefrågor för två visningsrutestorlekar. Observera följande egenskaper för CSS:

/* default styles (no media queries) */
 .span12 { width: 940px }
 .span8 { width: 620px }
 .span4 { width: 300px }
 .row-fluid .span12 { width: 100% }
 .row-fluid .span8 { width: 65.95744680851064% }
 .row-fluid .span4 { width: 31.914893617021278% }

@media (min-width: 768px) and (max-width: 979px) {
 .span12 { width: 724px; }
 .span8 {     width: 476px; }
 .span4 {     width: 228px; }
 .row-fluid .span12 {     width: 100%;}
 .row-fluid .span8 {     width: 65.74585635359117%; }
 .row-fluid .span4 {     width: 31.491712707182323%; }
}

@media (min-width: 1200px) {
 .span12 { width: 1170px }
 .span8 { width: 770px }
 .span4 { width: 370px }
 .row-fluid .span12 { width: 100% }
 .row-fluid .span8 { width: 65.81196581196582% }
 .row-fluid .span4 { width: 31.623931623931625% }
}

Flytta innehåll i sidkomponentens stödraster repositioning-content-in-the-page-component-grid

Geometrixx Medias exempelsidor distribuerar innehållsblockrader vågrätt i breda visningsrutor. I mindre visningsrutor fördelas samma block lodrätt. I följande exempel visas CSS-formaten som implementerar det här beteendet för HTML-koden som genereras av sidkomponenten media-home:

/* default styles (no media queries) */
    .row-fluid [class*="span"] {
        width: 100%;
        float: left;
}

@media (max-width: 767px) {
    [class*="span"], .row-fluid [class*="span"] {
        float: none;
        width: 100%;
    }
}

Modularisera sidkomponenterna tip-modularize-your-page-components

Modularisera komponenterna så att du kan använda koden effektivt. På webbplatsen används förmodligen flera olika typer av sidor, som välkomstsidor, artikelsidor eller produktsidor. Varje sidtyp innehåller olika typer av innehåll och använder troligen olika layouter. Men om vissa element i varje layout är gemensamma för flera sidor kan du återanvända koden som implementerar den delen av layouten.

Använd sidkomponentövertäckningar

Skapa en huvudsideskomponent som innehåller skript för generering av olika delar av en sida, till exempel head och body avsnitt samt header, content och footer avsnitt i brödtexten.

Skapa andra sidkomponenter som använder huvudsidkomponenten som cq:resourceSuperType. Dessa komponenter innehåller skript som åsidosätter skripten på huvudsidan efter behov.

Till exempel innehåller goemetrixx-media-programmet sidkomponenten (sling:resourceSuperType är bassidans komponent). Flera underordnade komponenter (som artikel, kategori och media-home) använder den här sidkomponenten som sling:resourceSuperType. Varje underordnad komponent innehåller en content.jsp-fil som åsidosätter content.jsp-filen för sidkomponenten.

Återanvänd skript

Skapa flera JSP-skript som genererar rad- och kolumnkombinationer som är gemensamma för flera sidkomponenter. Skriptet content.jsp för artikeln och mediahemskomponenterna refererar till exempel båda till skriptet 8x4col.jsp.

Ordna CSS-format efter visningsrutans målstorlek

Inkludera CSS-format och mediefrågor för olika visningsrutor i separata filer. Använd klientbiblioteksmappar för att sammanfoga dem.

Infoga komponenter i sidstödrastret inserting-components-into-the-page-grid

När komponenter genererar ett enda innehållsblock styr vanligtvis stödrastret som sidkomponenten skapar innehållets placering.

Som författare kan innehållsblocket återges i olika storlekar och relativa positioner. Innehållstext ska inte använda relativa riktningar för att referera till andra innehållsblock.

Om det behövs ska komponenten tillhandahålla alla CSS- eller JavaScript-bibliotek som krävs för den HTML-kod som den genererar. Använd en klientbiblioteksmapp inuti komponenten så att CSS- och JS-filerna genereras. Om du vill visa filerna skapar du ett beroende eller bäddar in biblioteket i en annan klientbiblioteksmapp under mappen /etc.

Underrutnät

Om komponenten innehåller flera innehållsblock lägger du till innehållsblocken i en rad för att skapa ett underrutnät på sidan:

Komponenten /apps/geometrixx-media/components/2-col-article-summary genererar till exempel två kolumner med innehåll. HTML som genereras har följande struktur:

<div class="row-fluid mutli-col-article-summary">
    <div class="span6">
        <article>
            <div class="article-summary-image">...</div>
            <div class="social-header">...</div>
            <div class="article-summary-description">...</div>
            <div class="social">...</div>
        </article>
    </div>
</div>

.row-fluid .span6-väljarna för sidans CSS gäller för div-elementen i samma klass och struktur i den här HTML. Komponenten innehåller dock även klientbiblioteksmappen /apps/geometrixx-media/components/2-col-article-summary/clientlibs:

Följande format ingår till exempel i filen /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css:

@media (max-width: 480px) {
    .mutli-col-article-summary .article-summary-image {
        float: left;
        width: 127px;
    }
    .mutli-col-article-summary .article-summary-description {
        width: auto;
        margin-left: 127px;
    }
    .mutli-col-article-summary .article-summary-description h4 {
        padding-left: 10px;
    }
    .mutli-col-article-summary .article-summary-text {
        margin-left: 127px;
        min-height: 122px;
        top: 0;
    }
}

Introduktion till flytande stödraster introduction-to-fluid-grids

Med flytande stödraster kan sidlayouter anpassas efter kundens visningsruta. Stödraster består av logiska kolumner och rader som placerar innehållsblocken på sidan.

Med HTML5-tekniken kan du implementera rutnätet och ändra det för att anpassa sidlayouter till olika visningsrutestorlekar:

Använda diskreta bredder using-discrete-widths

Använd en statisk sidbredd och innehållsblock med konstant bredd för varje intervall av visningsrutor som du anger som mål. När du ändrar storlek på ett webbläsarfönster manuellt ändras innehållsstorleken vid olika fönsterbredder (kallas även brytpunkter). Därför följs siddesignen närmare, vilket maximerar användarupplevelsen.

Skalförändra stödrastret scaling-the-grid

Använd rutnät för att skala innehållsblock så att de anpassas till olika visningsrutestorlekar. Innehållsblock sträcker sig över ett visst antal kolumner. När kolumnbredderna ökar eller minskar för att passa olika visningsrutestorlekar, ökar eller minskar bredderna för innehållsblocken därefter. Skalning kan stödja både stora och medelstora visningsrutor som är tillräckligt breda för att rymma innehållsblockens placering sida vid sida.

Flytta innehåll i stödrastret repositioning-content-in-the-grid

Storleken på innehållsblock kan begränsas av en minsta bredd, bortom vilken skalningen inte längre är effektiv. För mindre visningsrutor kan stödrastret användas för att lodrätt distribuera innehållsblock i stället för vågrätt.

Utforma stödrastret designing-the-grid

Ange vilka kolumner och rader som du måste placera innehållsblocken på sidorna. Sidlayouterna bestämmer hur många kolumner och rader som spänner över stödrastret.

Antal kolumner

Inkludera tillräckligt många kolumner för att vågrätt placera innehållsblocken i alla dina layouter, för alla visningsrutestorlekar. Använd fler kolumner än vad som behövs för att få plats med framtida siddesign.

Radinnehåll

Använd rader för att styra den lodräta placeringen av innehållsblock. Bestäm vilka innehållsblock som delar samma rad:

Implementeringar av stödraster grid-implementations

Skapa CSS-klasser och format så att du kan styra layouten för innehållsblocken på en sida. Siddesignen baseras ofta på den relativa storleken och placeringen av innehållsblocken i visningsrutan. Visningsrutan avgör den faktiska storleken på innehållsblocken. CSS måste ta hänsyn till de relativa och absoluta storlekarna. Du kan implementera ett flytande stödraster med hjälp av tre typer av CSS-klasser:

Målbredder (och tillhörande mediefrågor) avgränsar olika bredder som används för en sidlayout.

Bredder på innehållsblock widths-of-content-blocks

I allmänhet baseras width-formaten för innehållsblockklasserna på följande egenskaper för sidan och stödrastret:

CSS innehåller en serie mediefrågor som använder följande struktur:

@media(query_for_targeted_viewport){

  .class_for_container{ width:absolute_page_width }
  .class_for_row { width:100%}

  /* several selectors for content blocks   */
  .class_for_content_block1 { width:absolute_block_width1 }
  .class_for_content_block2 { width:absolute_block_width2 }
  ...

  /* several selectors for content blocks inside rows */
  .class_for_row .class_for_content_block1 { width:relative_block_width1 }
  .class_for_row .class_for_content_block2 { width:relative_block_width2 }
  ...
}

Använd följande algoritm som utgångspunkt när du utvecklar elementklasser och CSS-format för sidorna.

Placera innehållsblock i rader positioning-content-blocks-in-rows

Använd det flytande formatet för klassen .row-fluid så att du kan kontrollera om innehållsblocken i en rad är ordnade vågrätt eller lodrätt.

Lägg till formatet i .row-fluid-väljaren i varje mediefråga. Ange värdet enligt den sidlayout som du använder för den mediefrågan. I följande diagram visas en rad som fördelar innehållet vågrätt för breda visningsrutor och lodrätt för smala visningsrutor.

Följande CSS kan implementera detta beteende:

@media (min-width: 768px) and (max-width: 979px) {
   .row-fluid {
       width:100%;
       float:left
   }
}

@media (max-width:480px){
    .row-fluid {
       width:100%;
       float:none
   }
}

Tilldela klasser till innehållsblock assigning-classes-to-content-blocks

För sidlayouten för varje visningsrutestorlek som du anger, bestämmer du antalet kolumner som varje innehållsblock omfattar. Bestäm sedan vilken klass som ska användas för div-elementen i dessa innehållsblock.

När du har etablerat div-klasserna kan du implementera rutnätet med ditt AEM program.