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 om du vill 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 Mediefrågor rekommendation som beskriver denna CSS3-funktion 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:

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

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

Filen css.txt i /etc/designs/weretail/clientlibs -mappen listar 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 den avsedda visningsrutans storlek.

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

Inkludera klientbiblioteksmappen i JSP-skriptet för sidkomponenten för att generera CSS-filen som innehåller mediefrågorna och för att referera 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örhandsvisningar av sidorna i olika visningsrutor för att testa hur den responsiva designen fungerar. I Preview läge, Sidekick innehåller Devices nedrullningsbar meny 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.

Aktivera enhetsförhandsvisning i Sidekick måste du konfigurera sidan och MobileEmulatorProvider service. En annan sidkonfiguration styr listan över enheter som visas i Devices lista.

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

The Devices listan visas i Sidekick när sidan innehåller JSP-skriptet som återger Devices lista. Lägg till Devices lista till Sidekick, inkluderar /libs/wcm/mobile/components/simulator/simulator.jsp skript i head på sidan.

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

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

Öppna /apps/weretail/components/page/head.jsp i CRXDE Lite.

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 mobile.resourceTypes -egenskap.

När du arbetar med AEM finns det flera metoder för att hantera konfigurationsinställningarna för sådana tjänster. se Konfigurerar OSGi för fullständig information.

Om du till exempel vill skapa en [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository) i programmet:

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 egenskapen till jcr:content noden på webbplatsens rotsida. Värdet för egenskapen är en array med sökvägar till enhetsgruppsnoderna.

Enhetsgruppnoder finns i /etc/mobile/groups mapp.

Rotsidan för Geometrixx Media-webbplatsen är till exempel /content/geometrixx-media. The /content/geometrixx-media/jcr:content noden 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

Implementering av Gränssnittet MediaQueryList som W3C definierar gör att du kan utvärdera mediefrågor med javascript. Du kan lägga till logik i resultatet av mediefrågan och köra skript som är avsedda för det aktuella fönstret:

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

W3C-förslaget bildelement använder mediefrågor för att fastställa källan som ska användas för bildelement. Bildelementet använder elementattribut för att associera mediefrågor med bildsökvägar.

Den kostnadsfria picturefill.js-bibliotek ger liknande funktionalitet som den som föreslås picture och använder en liknande strategi. Biblioteksanropen picturefill.js window.matchMedia att utvärdera mediefrågor som definierats för en uppsättning div -element. Varje div -elementet anger också en bildkälla. Källan används när mediefrågan för div elementen returnerar true.

The picturefill.js för biblioteket krävs 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 en img element som sista underordnade element till <div data-picture> element:

<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 på data-src -attribut är 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 efter 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 tillhörande sökvägar för bildåtergivningar i DAM. Du kan också skapa en anpassad bildkomponent som gör det möjligt för författare att välja bildåtergivningar eller ange alternativ för runtime-återgivning.

I följande exempel väljer HTML från 2 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ändelsesekvens 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:

The image_0 noden har en jcr:resourceType värde för foundation/components/image, som har sling:resourceSuperType värde för 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 skriptets källkod /libs/foundation/components/parbase/img.GET.java
-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 åtgärder:

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

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>

The path variabeln innehåller sökvägen för den aktuella resursen (komponentnoden adaptive-image). Koden genererar en serie 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 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 requests with the URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg till adaptiv 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ända webbkonsolen (http://localhost:4502/system/console/configMgr) eller en sling:OsgiConfig-nod för att konfigurera de bredder som stöds i Adobe CQ Adaptive Image Component Server.

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

Implementeringsinformation implementation-details

The com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet klassen utökar AbstraktImageServlet klassen. Källkoden för AdaptiveImageComponentServer finns i /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl mapp.

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.")

The AbstractImageServlet klassen innehåller 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 en ImageContext -objekt.

The AdaptiveImageComponentServlet klassen åsidosätter createLayer -metod. Metoden hämtar sökvägen till bildresursen och den begärda bildbredden från ImageContext -objekt. Sedan anropas metoderna i 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 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

Till exempel Sling forwards HTTP requests with the URL http://localhost:4502/content/geometrixx/en.image.jpg till Image Reference Modification Server.

Tre ytterligare väljare anger önskad bildbredd, 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. se Konfigurerar OSGi för fullständig information.

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 ska du använda Sidekick för att ange bilden och lägga till image nod till sidegenskaperna:

Implementeringsinformation implementation-details-1

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

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.")

The AbstractImageServlet klassen innehåller 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 en ImageContext -objekt.

The ImageReferenceModificationServlet klassen åsidosätter createLayer och implementerar logiken som bestämmer vilken bildresurs som ska återges. Metoden hämtar en underordnad nod till sidans jcr:content nod namngiven image. An Bild objektet skapas från image och getFileReference returnerar sökvägen till bildfilen från fileReference bildnodens 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 AEM.

Om du inte känner till flytande stödraster kan du läsa Introduktion till flytande stödraster -avsnittet 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 i klass 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

Den design 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å span12, span8och span4 och mediefrågor för två visningsrutor. 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 för att utnyttja koden effektivt. På webbplatsen används förmodligen flera olika typer av sidor, till exempel en välkomstsida, en artikelsida eller en produktsida. 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ända sidkomponentövertäckningar

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

Skapa andra sidkomponenter som använder huvudsideskomponenten 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 (till exempel artikel, kategori och mediehem) 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ända skript

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

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.

Författare bör vara medvetna om att innehållsblocket kan å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 bör 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 för att generera CSS- och JS-filer. Visa filerna genom att skapa ett beroende eller bädda in biblioteket i en annan biblioteksmapp 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:

Till exempel /apps/geometrixx-media/components/2-col-article-summary skapar 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>

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

Följande format finns i /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css fil:

@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). Följaktligen 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 bredden på 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

Bestäm vilka kolumner och rader som du vill 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. Du bör använda fler kolumner än vad som behövs för att få plats med framtida siddesigner.

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 för att 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 är width stilen för innehållsblockklasser baseras 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 i .row-fluid för att styra om innehållsblocken i en rad ska ordnas vågrätt eller lodrätt.

Lägg till formatet i .row-fluid väljare inuti 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.