快速重构传统网站为响应式网站的方法研究

2017-04-23徐文平

电子技术与软件工程 2017年5期

关键词：重构

徐文平

摘要随着手机用户的快速增长，建立起自己的响应式网站成了很多企业和个人的需求。然而对于一个已有的传统网站，如果完全抛弃原有网站，重新建立一个新的响应式网站，将造成成本的增加和资源的浪费。本文探索一种将传统网站快速重构为响应式网站的方法，在不改动原有网站的基础上，增加很少的工作量，就可以实现网站在移动设备上的完全适配。

【关键词】响应式网站传统网站重构

1 引言

去年8月3日，CNNIC发布了第38次《中国互联网络发展统计报告》。根据报告，截止到2016年6月，我国网民规模达到7.10亿，手机上网人数达到6.56亿。网民中使用手机上网的人群占比达到92.5%，比2015年底提升2.4%，仅通过手机上网的网民占比达到24.5%，网民上网设备进一步向移动端集中。由此可见，手机等移动终端已经成为访问网站的主要工具。

然而，现在很多的网站仍然是基于PC端开发的传统网站，或者采用PC站点+移动站点的方式，这样或造成用户体验差，或造成开发成本和维护成本高，都不是最好的方法。

2 几种主要类型网站分析

2.1 传统PC网站

基于PC端开发的普通网站可以展示详尽的信息，页面大、内容丰富，可以包含各种动画、视频、图片等多媒体元素。由于采用电脑显示器进行网页浏览，网页布局一般采用较宽的尺寸和较小的字体，以保证尽可能多的展示信息。网络环境一般是有线或WLAN，上网速度相对快，网站开发不必过多考虑容量问题。PC端的网站更专注于网页内容的详尽和渲染风格的多样。

2.2 手机网站

手机网站主要是在各种移动终端设备上浏览。由于各种终端设备本身的差异、设备使用环境的差异和上网速度的差异，使得手机网站的内容必须简要，形式相对单一，必须能适配各种不同分辨率的终端设备，尽可能的考虑用户体验。

基于移动端开发的网站在浏览器设备和上网环境上受到了很大的局限，开发过程中更多的要考虑网站内容的简约和用户浏览的体验。

目前用的较多的微网站就是手机网站的一种形式。它是基于微信入口的手机网站，除具有手机网站的一般特点外，企业和个人还能借助微信用户，更准确的宣传自己。微网站更加注重用户的浏览体验和交互性能，具有便捷性，隐私性，互动性，传播力，关注力，成交率，转化率，曝光率等特点。

2.3 响应式网站

响应式网站即自适应网站，是由Ethan Marcotte在2010年5月提出的。简单的说，就是“一站开发，随处可用”，能兼容各种终端，不用考虑为不同的屏幕设备定做版本。近年来，各种大屏幕移动设备的普及，响应式网站也受到了更多人的青睐。乃至很多人认为，响应式网站是实现友好移动目标的最佳方案。

响应式网站做到了“三站合一”，在网站开发和维护上大大降低成本，同时全方位宣传自己。

3 关键技术分析

3.1 媒介查询

媒介查询（Media Query）是CSS3的新增功能，允许根据访问设备的条件定制样式表规则。具体来说，就是可以根据访问端的介质情况和屏幕分辨率，调用不同的样式来渲染页面效果。通过响应式设计，可以实现跨平台和跨设备的兼容。

可以通过两种不同的方式使用媒体查询：

3.1.1 在页面头部链接外部CSS

在中使用标签时，通过设置media属性，实现对设备的判断，从而加载不同的CSS文件，例如：

這句代码表示在满足 media 的判断语句 screen and （min-width： 400px）时调用middle.css文件，即在宽度大于等于400像素的屏幕设备上面使用该样式表。

3.1.2 在CSS中为不同设备定制样式

@media screen and （min-width： 600px） { /* CSS Code */ }

@media screen and （max-width： 599px） { /* CSS Code */ }

上面两行代码中，第一行代码表示在满足最小宽度为600像素的屏幕设备中调用样式，第二行代码表示在最大宽度为599像素的屏幕设备中执行的样式。写在 @media 语句段外的是公用代码。如果出现样式冲突，会按照原本的CSS规则调用样式。

通过CSS中的媒介查询功能，可以为不同的设备类型定义不同的CSS样式，在通过浏览网页时，自动查询媒体类型并调用对应的样式，以实现对不同设备的适配。

3.2 弹性盒布局

CSS3引入了一种新的排版布局方式—弹性盒布局模型（Flexible Box Layout）。使用该布局方式，可以更加高效的对容器中的元素进行布局、对齐和进行空间的分配。这种方式在不清楚容器尺寸或动态时也能执行。

弹性盒布局原理如图1所示。

在弹性盒布局中，一个元素上有主轴和纵轴，主轴默认是横向的，纵轴是竖向的。其中，所有子元素的排版都会受这两个轴的影响。通过改变主轴和纵轴的方向，可以设置很多相关CSS属性，从而实现不同的设计效果。

3.3 图片液态化

在响应式布局中，图片需要适配不同宽度的屏幕，以给出最佳显示方案，如水一样会跟着宽度的变化而变化。一个网页中的图片分为内容图片和背景图片，可以分别对其进行“液态化”设置。

3.3.1 内容图片

对内容图片，可以使用max-width属性设置其最大宽度值，以保证图片的大小不会超出它所在的父容器大小。例如：

img{ max-width：100%； height：auto；}

这样调整后，图片的宽度不会超出其父元素的有效宽度。当其父元素变窄时，图片的最大宽度值也相应减小，当其父元素变宽时，图片的最大宽度值也随之增加。图片不会因为其容器的大小而被隐藏和遮盖。通过设置height属性的值为auto，保证了在图片宽度变化时，整张图片是等比例缩放的。

3.3.2 背景图片

在CSS3中新增了对背景图进行大小控制的属性：background-size。background-size属性包含两个属性值，分别表示背景图的宽度和高度。要实现背景图的“液态化”只需将宽度值设为100%，高度值设为auto，例如：

.bg{background：url（images/bg.jpg） no-repeat； background-size：100% auto；}

4 具体实现

将传统网站重构为响应式网站时，要保证原有网站在PC端浏览的效果不变，同时要适配不同的移动设备。这就要求对原有网站进行分析，不破坏原有网站的HTML结构，只是通过新建CSS来满足移动设备的浏览。此处以一个传统的个人博客网页为例，详细说明重构的方法和过程。已有的个人博客网页在PC上浏览的效果如图2所示。

4.1 分析网站、取舍内容

由于移动设备屏幕宽度及上网环境的限制，不可能将传统网站中的内容全部显示。在取舍内容时可以保留网站中最重要的部分，对可有可无的内容要舍弃，对比较耗流量的背景图要舍弃。手机网站中的每个页面都是最应该呈现给用户的内容，页面简洁，无需过多的背景修饰。在个人博客网页中将右侧边栏的内容在手机端显示时全部隐藏，如图3所示。

4.2 编写响应式网站样式表

在对内容进行取舍后，再针对移动设备编写响应的样式表文件。在样式表文件中要对不显示的内容的进行隐藏，对剩下内容的显示实现自适应。

4.2.1 隐藏不显示的内容

对不显示的内容可以通过设置display属性值为“none”实现。在个人博客页面中右侧边栏内容放在一个调用了类“main_slide”的div里，设置如下：

.main_slide{ display：none；}

对不需要的背景图，可以通过设置background属性值为“none”实现。

4.2.2 自适应设置

在設置自适应时，要考虑容器大小、图片大小和文字大小的自适应，还要考虑排版布局的自适应。

首先将各容器大小和图片大小设置为百分比。个人博客页面中的container容器和header容器均为全屏显示，可以设置为：

.container{ width：100%； }

.header{ width：100%； }

对于排在一行的不同容器，要适当分配比例，例如：