随着手机用户的快速增长, 建立起自己的响应式网站成了很多企业和个人的需求。然而对于一个已有的传统网站, 如果完全抛弃原有网站, 重新建立一个新的响应式网站, 将造成成本的增加和资源的浪费。如果将传统网站快速重构为响应式网站的方法, 在不改动原有网站的基础上, 增加很少的工作量, 就可以实现网站在移动设备上的完全适配。
一、几种主要类型网站分析
1、传统PC网站
基于PC端开发的普通网站可以展示详尽的信息, 页面大、内容丰富, 可以包含各种动画、视频、图片等多媒体元素。由于采用电脑显示器进行网页浏览, 网页布局一般采用较宽的尺寸和较小的字体, 以保证尽可能多的展示信息。网络环境一般是有线或WLAN, 上网速度相对快, 网站开发不必过多考虑容量问题。PC端的网站更专注于网页内容的详尽和渲染风格的多样。
2、手机网站
手机网站主要是在各种移动终端设备上浏览。由于各种终端设备本身的差异、设备使用环境的差异和上网速度的差异, 使得手机网站的内容必须简要, 形式相对单一, 必须能适配各种不同分辨率的终端设备, 尽可能的考虑用户体验。
基于移动端开发的网站在浏览器设备和上网环境上受到了很大的局限, 开发过程中更多的要考虑网站内容的简约和用户浏览的体验。
目前用的较多的微网站就是手机网站的一种形式。它是基于微信入口的手机网站, 除具有手机网站的一般特点外, 企业和个人还能借助微信用户, 更准确的宣传自己。微网站更加注重用户的浏览体验和交互性能, 具有便捷性, 隐私性, 互动性, 传播力, 关注力, 成交率, 转化率, 曝光率等特点。
3、响应式网站
响应式网站简单说来, 就是“一站开发, 随处可用”, 能兼容各种终端, 不用考虑为不同的屏幕设备定做版本。近年来, 各种大屏幕移动设备的普及, 响应式网站也受到了更多人的青睐。乃至很多人认为, 响应式网站是实现友好移动目标的最佳方案。
响应式网站做到了“三站合一”, 在网站开发和维护上大大降低成本, 同时全方位宣传自己。
二、关键技术分析
1、媒介查询
媒介查询具体来说, 就是可以根据访问端的介质情况和屏幕分辨率, 调用不同的样式来渲染页面效果。通过响应式设计, 可以实现跨平台和跨设备的兼容。
通过CSS中的媒介查询功能, 可以为不同的设备类型定义不同的CSS样式, 在通过浏览网页时, 自动查询媒体类型并调用对应的样式, 以实现对不同设备的适配。
2、弹性盒布局
CSS3引入了一种新的排版布局方式—弹性盒布局模型。使用该布局方式, 可以更加高效的对容器中的元素进行布局、对齐和进行空间的分配。这种方式在不清楚容器尺寸或动态时也能执行。
3、图片液态化
在响应式布局中, 图片需要适配不同宽度的屏幕, 以给出最佳显示方案, 如水一样会跟着宽度的变化而变化。一个网页中的图片分为内容图片和背景图片, 可以分别对其进行“液态化”设置。
4、具体实现
将传统网站重构为响应式网站时, 要保证原有网站在PC端浏览的效果不变, 同时要适配不同的移动设备。这就要求对原有网站进行分析, 不破坏原有网站的HTML结构, 只是通过新建CSS来满足移动设备的浏览。
①、分析网站、取舍内容
由于移动设备屏幕宽度及上网环境的限制, 不可能将传统网站中的内容全部显示。在取舍内容时可以保留网站中最重要的部分, 对可有可无的内容要舍弃, 对比较耗流量的背景图要舍弃。手机网站中的每个页面都是最应该呈现给用户的内容, 页面简洁, 无需过多的背景修饰。
②、编写响应式网站样式表
在对内容进行取舍后, 再针对移动设备编写响应的样式表文件。在样式表文件中要对不显示的内容的进行隐藏, 对剩下内容的显示实现自适应。
③、为页面应用样式
通过CSS3的媒体查询设置, 可以根据具体设备情况, 为网页加载不同的CSS样式表, 以实现在不同设备上的相同浏览体验。
5、测试
在PC端使用IE浏览器、谷歌浏览器和火狐浏览器打开网页, 并改变窗口大小, 网页中的图片、文字、背景及其他网页元素均能正常显示, 并能保持良好的布局。在平板电脑和手机上打开网页, 网页中各元素均能正常显示, 并保持良好布局。测试结果表明, 重构后的页面, 具有很好的适配性。