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

快速重构传统网站为响应式网站方法研究 　　摘 要 随着手机用户的快速增长，建立起自己的响应式网站成了很多企业和个人的需求。然而对于一个已有的传统网站，如果完全抛弃原有网站，重新建立一个新的响应式网站，将造成成本的增加和资源的浪费。本文探索一种将传统网站快速重构为响应式网站的方法，在不改动原有网站的基础上，增加很少的工作量，就可以实现网站在移动设备上的完全适配。 　　【关键词】响应式网站 传统网站 重构 　　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）。使用该布局方式，可以更加高效的对容器中的元素进行布局、对齐和进行空间的分配。这种方式在不清楚容器尺寸或动态时也能执行。 　　弹性盒布局原理如图