SiteServer CMS 如何实现响应式网站---实践篇

上一篇SiteServer CMS 如何实现响应式网站---原理篇主要讲响应式网站的发展历程以及原理，重点讲解响应式和自适应的区别。在了解这个原理之后，本篇主要讲SiteServer CMS 如何实现响应式网站的。

一、SiteServer CMS 两大响应式解决方案

为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题，前前后后也出现了好多种方案。上一篇文章讲到主要有两种方案：

• 一种是为不同的设备提供不同版本的网页，比如一个站点为PC、Mobile、Pad提供三个不同的版本。
• 另一种是通过提供自适应或响应式网页布局，核心思想就是"一次设计，普遍适用"，让同一个页面自动适应不同大小的设备。

SiteServer CMS 能够支撑对数千个父站点、子站点的创建与统一管理，对每个站点设置不同的域名，一个站点内支持使用二级域名，完美实现了网站群管理思想。基于SiteServer CMS的这个特性，我们可以通过建立站群将PC、平板电脑、手机三大平台联系起来，实现平台之间的数据共享化、数据管理统一化、私有数据独立化，最终实现SiteServer CMS针对PC、平板电脑、手机等的多屏合一。

SiteServer CMS实现PC、平板电脑、手机等的多屏合一支持以上两种解决方案。

• 多个站点方案：使用多个CMS站点，各站点分别创建自己的栏目发布自己的内容，使用自己独立的模板，通过引用内容的方式实现数据共享来实现多屏合一。
• 一个站点方案：使用单个CMS站点，创建栏目发布内容，通过使用一套自适应或响应式模板的方式来实现多屏合一。

具体取用哪个方案，主要还是看业务规模、预算和行业特点。

二、多个站点方案

此方案的核心就是为不同的设备提供不同版本的模板，比如一个站点为PC、Mobile、Pad提供三个不同的版本。数据只需要发布到一个站点上即可，其他站点的数据通过引用内容的方式实现数据共享。

以SiteServer CMS创建多个站点实现多屏合一为例，下面是详细步骤：
1、创建多个站点

2、创建栏目发布内容
各个站点各自创建自己的栏目、其中内容只需要发布到其中一个站点：

3、创建模板
各个站点创建自己独立的模板，模板只针对自己平台的屏幕，无需适应其他平台。

4、数据共享
SiteServer CMS通过引用内容的方式能够实现多个站点之间的数据共享，这样各站点既能发布自己独立的内容又能与其他站点之间共享数据，从而实现SiteServer CMS针对PC、平板电脑、手机等的多屏合一。

5、优点

• 数据灵活性：各平台既能发布自己独立的数据又能共享其他站点的数据，同时使用自己独立的模板来调取数据，这样在网页上展示数据也就变得非常灵活。
• 用户体验：各平台针对自己平台的特性独家定制自己的模板，无需适应其他平台，充分展现自己的优势，最大程度地提高用户体验。

6、缺点：

• 网站有多个入口：您的用户必须记住3个URL，或以其他的方式重定向到移动网站，而且移动网站还需要为SEO做额外的工作。
• 成本高：必须维护多个网站。

三、一个站点方案

此方案的核心就是"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。此方案不管采用自适应或响应式布局，工作量的重点都是在模板。所以这种方案和做一个普通网站（非响应式）工作流程是一样的，区别就在于模板。

设计师设计好能够自适应PC、平板电脑、手机多个终端屏幕分辨率的页面，这样设计出来的页面在不同终端打开时会自适应屏幕，再把页面转换成SiteServer CMS模板，从而实现针对PC、平板电脑、手机的多屏合一。

1、优点：

• 一个网站：适应所有设备，更容易管理，一个CMS站点为其他各端站点提供数据来源，数据共享最大化。
• 一个入口：网站具有一个统一的入口，更有利于搜索引擎优化和网站的推广。
• 容易做搜索引擎优化：不需要为移动设备创建特定的内容，可以让移动设
• 维护成本低：单个网站的成本比多个网站的成本低。

2、缺点：

• 个性化稍弱：各平台之间无法互相独立，不能发布各平台独立拥有的数据，灵活性较差。
• 兼容性低：页面不论采用自适应还是响应式都是较新的技术，在一些老的设备和浏览器中加载页面速度过慢，甚至是完全不支持。