网页的响应式设计 responsive-design-for-web-pages

设计网页，使其适应显示它们的客户端视区。 通过响应式设计，可以在两个方向上的多个设备上有效地显示相同页面。 下图演示了页面响应视区大小更改的一些方式：

开发可生成适应多种窗口大小和方向的HTML5页面的Adobe Experience Manager (AEM)应用程序。 例如，以下视区宽度范围对应于各种设备类型和方向

有关实施响应式设计行为的信息，请参阅以下主题：

在设计时，使用​ Sidekick ​预览各种屏幕大小的页面。

在开发之前 before-you-develop

在开发支持网页的AEM应用程序之前，需要做出一些设计决策。 例如，您必须具有以下信息：

应用程序结构 application-structure

典型的AEM应用程序结构支持所有响应式设计实施：

使用媒体查询 using-media-queries

媒体查询允许选择性地使用CSS样式进行页面渲染。 通过AEM开发工具和功能，您可以在应用程序中高效实施媒体查询。

W3C组提供了描述此CSS3功能和语法的媒体查询建议。

创建CSS文件 creating-the-css-file

在CSS文件中，根据所定向设备的属性定义媒体查询。 以下实施策略可以有效地管理每个媒体查询的样式：

We.Retail媒体示例使用此策略在网站设计中定义样式。 We.Retail使用的CSS文件位于*/apps/weretail/clientlibs/clientlib-site/less/grid.less。

下表列出了css子文件夹中的文件。

/etc/designs/weretail/clientlibs文件夹中的css.txt文件列出了客户端库文件夹包含的CSS文件。 文件的顺序实现了样式优先权。 随着设备大小的减小，样式会更加具体。

#base=css

style.css
 bootstrap.css

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

提示：使用描述性文件名可以轻松识别目标视区大小。

在AEM页面中使用媒体查询 using-media-queries-with-aem-pages

在页面组件的JSP脚本中包含客户端库文件夹。 这样做有助于生成包含媒体查询并引用文件的CSS文件。

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

JSP脚本将生成引用样式表的以下HTML代码：

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

预览特定设备 previewing-for-specific-devices

查看不同视区大小的页面的预览，以便测试响应式设计的行为。 在​ 预览 ​模式下，Sidekick ​包含用于选择设备的​ 设备 ​下拉菜单。 选择设备后，页面会随之发生更改，以适应视区大小。

若要在​ Sidekick ​中启用设备预览，必须配置该页面和​ MobileEmulatorProvider ​服务。 另一个页面配置控制出现在​ 设备 ​列表中的设备列表。

添加设备列表 adding-the-devices-list

当页面包含用于渲染​ Sidekick ​列表的JSP脚本时，设备 ​列表将出现在​ 设备 ​中。 要将​ 设备 ​列表添加到​ Sidekick，请在页面的head部分中包含/libs/wcm/mobile/components/simulator/simulator.jsp脚本。

在定义head节的JSP中包含以下代码：

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

要查看示例，请在CRXDE Lite中打开/apps/weretail/components/page/head.jsp文件。

注册用于模拟的页面组件 registering-page-components-for-simulation

要启用设备模拟器来支持您的页面，请使用MobileEmulatorProvider工厂服务注册您的页面组件并定义mobile.resourceTypes属性。

使用AEM时，可通过多种方法管理此类服务的配置设置；有关完整的详细信息，请参阅配置OSGi。

例如，要在应用程序中创建 [sling:OsgiConfig](/docs/experience-manager-65/content/implementing/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)节点，请执行以下操作：

添加以下节点属性：

指定设备组 specifying-the-device-groups

要指定出现在“设备”列表中的设备组，请将cq:deviceGroups属性添加到站点的根页面的jcr:content节点。 属性的值是设备组节点的路径数组。

设备组节点位于/etc/mobile/groups文件夹中。

例如，Geometrixx Media站点的根页面为/content/geometrixx-media。 /content/geometrixx-media/jcr:content节点包含以下属性：

使用“工具”控制台创建和编辑设备组。

使用自适应图像 using-adaptive-images

您可以使用媒体查询来选择要显示在页面中的图像资源。 但是，使用媒体查询条件化其使用的每个资源都下载到客户端。 媒体查询仅确定是否显示下载的资源。

对于大型资源（如图像），下载所有资源不是有效使用客户端的数据管道。 要有选择地下载资源，请在媒体查询执行选择后使用JavaScript启动资源请求。

以下策略可加载使用媒体查询选择的单个资源：

使用JavaScript评估媒体查询 evaluating-media-queries-using-javascript

W3C定义的MediaQueryList接口的实现允许您使用JavaScript评估媒体查询。 您可以将逻辑应用于媒体查询结果，并执行针对当前窗口的脚本：

选择特定于媒体的资源 selecting-media-specific-resources

W3C 图片元素使用媒体查询来确定用于图像元素的源。 图片元素使用元素属性将媒体查询与图像路径相关联。

免费提供的picturefill.js库提供了与建议的picture元素类似的功能，并且使用了类似的策略。 picturefill.js库调用window.matchMedia以评估为一组div元素定义的媒体查询。 每个div元素还指定一个图像源。 div元素的媒体查询返回true时使用源。

picturefill.js库需要与以下示例类似的HTML代码：

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

呈现页面时，picturefull.js将插入img元素作为<div data-picture>元素的最后一个子元素：

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

在AEM页中，data-src属性的值是存储库中资源的路径。

在AEM中实施自适应图像 implementing-adaptive-images-in-aem

要在AEM应用程序中实施自适应图像，必须添加所需的JavaScript库，并在您的页面中包含所需的HTML标记。

库

获取以下JavaScript库，并将其包含在客户端库文件夹中：

提示： ​您可以通过嵌入自动连接多个客户端库文件夹。

HTML

创建一个组件，该组件将生成picturefill.js代码所需的所需div元素。 在AEM页中， data-src属性的值是存储库中资源的路径。 例如，页面组件可以对DAM中图像演绎版的媒体查询和相关路径进行硬编码。 或者，创建一个自定义图像组件，让作者能够选择图像呈现或指定运行时呈现选项。

以下示例HTML从同一图像的两个DAM演绎版中进行选择。

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

了解AEM中的图像渲染 understanding-image-rendering-in-aem

要自定义图像渲染，您应该了解默认的AEM静态图像渲染实施。 AEM提供图像组件和图像渲染servlet，二者可一起渲染网页的图像。 将图像组件包含在页面的段落系统中时，会发生以下事件序列：

例如，图像组件的JSP生成以下HTML元素：

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

浏览器加载页面时，它会使用src属性的值作为URL来请求图像。 Sling会解压缩URL：

image_0节点的jcr:resourceType值为foundation/components/image，其sling:resourceSuperType值为foundation/components/parbase。 parbase组件包含与选择器和请求URL的文件名扩展名匹配的img.request.javaGET。 CQ使用此脚本(servlet)渲染图像。

要查看脚本的源代码，请使用CRXDE Lite打开/libs/foundation/components/parbase/img.GET.java
文件。

根据当前视区大小缩放图像 scaling-images-for-the-current-viewport-size

在运行时根据客户端视区的特征缩放图像，以提供符合响应式设计原则的图像。 使用与静态图像渲染相同的设计模式，使用servlet和创作组件。

组件必须执行以下任务：

处理图像请求的servlet必须执行以下任务：

可用的解决方案

AEM会安装以下您可使用或扩展的实施。

了解自适应图像组件 understanding-the-adaptive-image-component

自适应图像组件生成对自适应图像组件Servlet的调用，以呈现根据设备屏幕调整大小的图像。 该组件包括以下资源：

添加DIV元素 adding-the-div-elements

adaptive-image.jsp脚本包含以下用于生成div元素和媒体查询的代码：

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

path变量包含当前资源（自适应图像组件节点）的路径。 该代码生成一系列具有以下结构的div元素：

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

data-scr属性的值是Sling解析为渲染图像的自适应图像组件Servlet的URL。 data-media属性包含根据客户端属性评估的媒体查询。

以下HTML代码是JSP生成的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.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>

更改图像大小选择器 changing-the-image-size-selectors

如果自定义自适应图像组件并更改宽度选择器，则还必须配置自适应图像组件Servlet以支持宽度。

了解自适应图像组件Servlet understanding-the-adaptive-image-component-servlet

自适应图像组件Servlet根据指定的宽度调整JPEG图像的大小，并设置JPEG质量。

自适应图像组件Servlet的接口 the-interface-of-the-adaptive-image-component-servlet

自适应图像组件Servlet绑定到默认的Sling servlet，并支持.jpg、.jpeg、.gif和.png文件扩展名。 Servlet选择器为img。

因此，Sling将以下格式的HTTP请求URL解析为此servlet：

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

例如，Sling将URL为http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg的HTTP请求转发到自适应图像组件Servlet。

另外两个选择器指定请求的图像宽度和JPEG质量。 以下示例请求宽度为480像素且质量为中的图像：

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

支持的图像属性

此servlet接受有限数量的图像宽度和品质。 默认支持以下宽度（以像素为单位）：

完整值表示无缩放。

支持以下JPEG质量值：

数值分别为0.4、0.82和1.0。

更改支持的默认宽度

使用Web控制台(http://localhost:4502/system/console/configMgr)或sling：OsgiConfig节点配置Adobe CQ自适应图像组件Servlet支持的宽度。

有关如何配置AEM服务的信息，请参阅配置OSGi。

实施详细信息 implementation-details

com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet类扩展AbstractImageServlet类。 AdaptiveImageComponentServlet源代码位于/libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl文件夹中。

类使用Felix SCR注释来配置与servlet关联的资源类型和文件扩展名，以及第一个选择器的名称。

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

此servlet使用属性SCR注释来设置默认支持的图像质量和尺寸。

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

AbstractImageServlet类提供用于处理HTTP请求的doGet方法。 此方法确定与请求关联的资源，从存储库中检索资源属性，并在ImageContext对象中返回这些属性。

AdaptiveImageComponentServlet类覆盖createLayer方法。 该方法从ImageContext对象中获取图像资源的路径和请求的图像宽度。 然后调用info.geometrixx.commons.impl.AdaptiveImageHelper类的方法，执行实际图像缩放。

AdaptiveImageComponentServlet类也会覆盖writeLayer方法。 此方法将JPEG质量应用于图像。

图像引用修改Servlet(常用Geometrixx) image-reference-modification-servlet-geometrixx-common

示例图像引用修改Servlet生成图像元素的大小属性以缩放网页上的图像。

调用servlet calling-the-servlet

此servlet绑定到cq:page资源，并支持.jpg文件扩展名。 Servlet选择器为image。 因此，Sling将以下格式的HTTP请求URL解析为此servlet：

path-to-page-node.image.jpg

例如，Sling将URL为http://localhost:4502/content/geometrixx/en.image.jpg的HTTP请求转发到图像引用修改Servlet。

另外三个选择器可指定所请求的图像宽度、高度和（可选）质量。 以下示例请求宽度770像素、高度360像素以及中等质量的图像。

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

支持的图像属性

此servlet接受有限数量的图像维度和质量值。

默认情况下，支持以下值(widthxheight)：

支持以下图像质量值：

使用AEM时，可通过多种方法管理此类服务的配置设置；有关完整的详细信息，请参阅配置OSGi。

指定图像资源 specifying-the-image-resource

图像路径、尺寸和质量值必须作为节点的属性存储在存储库中：

在创作页面时，使用​ Sidekick ​指定图像并将image节点添加到页面属性：

实施详细信息 implementation-details-1

info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet类扩展AbstractImageServlet类。 如果您安装了cq-geometrixx-commons-pkg包，则ImageReferenceModificationServlet源代码位于/apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets文件夹中。

类使用Felix SCR注释来配置与servlet关联的资源类型和文件扩展名，以及第一个选择器的名称。

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

此servlet使用属性SCR注释来设置默认支持的图像质量和尺寸。

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

AbstractImageServlet类提供用于处理HTTP请求的doGet方法。 此方法确定与调用关联的资源，从存储库检索资源属性，并将其保存在ImageContext对象中。

ImageReferenceModificationServlet类覆盖createLayer方法并实施用于确定要呈现的图像资源的逻辑。 该方法检索页面jcr:content节点的名为image的子节点。 从此image节点创建了Image对象，getFileReference方法返回了图像节点的fileReference属性中的图像文件路径。

开发流体网格 developing-a-fluid-grid

AEM使您能够高效实施流式网格。 本页说明如何将流式网格或现有网格实现(如Bootstrap)集成到AEM应用程序中。

如果您不熟悉流式网格，请参阅本页底部的流式网格简介部分。 本文对流体网格进行了概述，为流体网格的设计提供了指导。

使用页面组件定义网格 defining-the-grid-using-a-page-component

使用页面组件可生成定义页面的HTML块的内容元素。 页面引用的ClientLibraryFolder提供控制内容块布局的CSS：

例如，示例geometrixx-media应用程序包含media-home组件。 此页面组件插入两个脚本，这些脚本生成类row-fluid的两个div元素：

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

缩放页面组件网格 scaling-the-page-component-grid

与geometrixx-media页面组件(/etc/designs/geometrixx-media)关联的设计包含clientlibs ClientLibraryFolder。 此ClientLibraryFolder为row-fluid类的子级的row-fluid类、span*类和span*类定义CSS样式。 通过媒体查询，可以为不同的视区大小重新定义样式。

以下示例CSS是这些样式的子集。 此子集侧重于span12、span8和span4类以及两个视区大小的媒体查询。 请注意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% }
}

在页面组件网格中重新定位内容 repositioning-content-in-the-page-component-grid

示例Geometrixx Media应用程序的页面在宽视区中水平分布内容块行。 在较小的视区中，相同的块垂直分布。 以下示例CSS显示了为media-home页面组件生成的HTML代码实施此行为的样式：

/* 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%;
    }
}

将页面组件模块化 tip-modularize-your-page-components

将组件模块化，以便高效地使用代码。 您的网站可能会使用多种不同类型的页面，例如欢迎页面、文章页面或产品页面。 每种类型的页面包含不同类型的内容，并且可能会使用不同的布局。 但是，当每个布局的某些元素在多个页面中很共有时，您可以重复使用实施该部分布局的代码。

使用页面组件叠加图

创建一个主页面组件，该组件提供用于生成页面的各个部分（如正文中的head和body节以及header、content和footer节）的脚本。

创建将主页面组件用作cq:resourceSuperType的其他页面组件。 这些组件包括根据需要覆盖主页的脚本的脚本。

例如，goemetrixx-media应用程序包含页面组件（sling:resourceSuperType是基础页面组件）。 多个子组件（如article、category和media-home）使用此页面组件作为sling:resourceSuperType。 每个子组件都包含一个content.jsp文件，该文件将覆盖页面组件的content.jsp文件。

重复使用脚本

创建多个JSP脚本，这些脚本可生成多个页面组件通用的行和列组合。 例如，文章的content.jsp脚本和media-home组件都引用8x4col.jsp脚本。

按目标视区大小组织CSS样式

在单独的文件中包含不同视区大小的CSS样式和媒体查询。 使用客户端库文件夹连接它们。

将组件插入页面网格 inserting-components-into-the-page-grid

当组件生成单个内容块时，通常页面组件建立的网格会控制内容的放置。

作为作者，内容块可以按各种大小和相对位置呈现。 内容文本不应使用相对方向来引用其他内容块。

如有必要，组件应提供其生成的HTML代码所需的任何CSS或JavaScript库。 在组件内使用客户端库文件夹，以便生成CSS和JS文件。 若要公开这些文件，创建依赖关系或将库嵌入到/etc文件夹下的另一个客户端库文件夹中。

子网格

如果组件包含多个内容块，请在行中添加内容块以在页面上建立子网格：

例如，/apps/geometrixx-media/components/2-col-article-summary组件生成两列内容。 它生成的HTML具有以下结构：

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

页面CSS的.row-fluid .span6选择器适用于此HTML中相同类和结构的div元素。 但是，该组件还包括/apps/geometrixx-media/components/2-col-article-summary/clientlibs客户端库文件夹：

例如，/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;
    }
}

流式网格简介 introduction-to-fluid-grids

流式网格使页面布局能够适应客户端视区的尺寸。 网格由逻辑列和行组成，这些列和行在页面上放置内容块。

使用HTML5技术，您可以实施网格并操作它以根据不同的视区大小调整页面布局：

使用离散宽度 using-discrete-widths

对于要定位的每个视区宽度范围，请使用静态页面宽度和固定宽度的内容块。 手动调整浏览器窗口大小时，内容大小的更改发生在离散的窗口宽度（也称为断点）。 因此，页面设计会更加紧密地粘合，从而最大化用户体验。

缩放网格 scaling-the-grid

使用网格来缩放内容块，以适应不同的视区大小。 内容块跨越特定数量的列。 随着列宽度的增加或减少以适合不同的视区大小，内容块的宽度将相应地增加或减少。 缩放功能可支持宽到足以容纳内容块的并排放置的大中型视区。

在网格中重新定位内容 repositioning-content-in-the-grid

内容块的大小可以受最小宽度限制，超过该宽度缩放不再有效。 对于较小的视区，可以使用网格垂直分布内容块，而不是水平分布。

设计网格 designing-the-grid

确定必须在页面上放置内容块的列和行。 页面布局决定了网格中跨越的列数和行数。

列数

包含足够的列，以便在所有版面的所有视区大小中水平放置内容块。 使用的列数多于当前所需的列数，这样您便可以适应未来的页面设计。

行内容

使用行控制内容块的垂直位置。 确定共享同一行的内容块：

网格实施 grid-implementations

创建CSS类和样式，以便您可以控制页面上内容块的布局。 页面设计通常基于内容块在视区中的相对大小和位置。 视区确定内容块的实际大小。 CSS必须考虑相对大小和绝对大小。 您可以使用三种类型的CSS类实施流式网格：

目标视区宽度（及其相关媒体查询）用于划分用于页面布局的离散宽度。

内容块的宽度 widths-of-content-blocks

通常，内容块类的width样式基于页面和网格的以下特征：

CSS包含一系列使用以下结构的媒体查询：

@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 }
  ...
}

使用以下算法作为开发页面的元素类和CSS样式的起点。

将内容块定位在行中 positioning-content-blocks-in-rows

使用.row-fluid类的浮点样式，以便您可以控制行中的内容块是水平排列还是垂直排列。

将样式添加到每个媒体查询中的.row-fluid选择器。 根据您用于该媒体查询的页面布局设置值。 例如，下图说明了一行，该行为宽视区水平分布内容，为窄视区垂直分布内容。

以下CSS可以实现此行为：

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

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

将类分配给内容块 assigning-classes-to-content-blocks

对于要定位的每个视区大小的页面布局，请确定每个内容块所跨越的列数。 然后，确定用于这些内容块的div元素的类。

建立div类后，可以使用AEM应用程序实施网格。