将PC网站构建为移动版网站的方法

将PC网站构建为移动版网站的方法

将PC网站构建为兼容各种智能终端的移动版网站已是大势所趋。目前，具体的实现方法主要有以下三种：

1 页面重建

该方法是在原有PC站点的基础之上，通过组织团队或寻找软件开发公司，针对智能移动终端的特点，开发移动版网站，形成PC站点+移动站点的结构。用户浏览网站时，根据自身使用的客户端设备类型，来选择对应的网站版本。此方法可以根据不同的客户端而量身定制满足客户需求的站点，可以最大程度的提高用户体验，但这种方式存在开发成本和维护成本高等缺点。

2 利用百度Site App工具

此方法借助第三方工具百度Site App，通过该工具快速将传统PC网站构建为移动版网站。具体实现过程如下：

（1）通过输入官方地址http：//siteapp.baidu.com,打开在线工具Site App，并在其中输入想要构建为手机网站的PC网站地址；

（2）选择目标网站的样式；

（3）通过添加或者自动抓取等方式，设置目标网站的导航；

（4）根据需要，添加电话、邮箱、版权等相关组件；

（5）下载验证文件，上传至网站根目录进行网站验证；

（6）绑定域名，配置dns即可。

Site App工具对于复杂脚本的处理能力有限，并且对网站交互功能的转换效果比较差，因此它比较适合于构建以文字阅读为主的网站。

3 响应式网站

响应式网站也称之为自适应网站，它能够兼容各种客户终端。也就是说，采用这种方法，只需开发一个网站，便可提供给所有的设备使用，无需考虑屏幕尺寸不一的问题。将PC网站构建为响应式网站，既要保留其原有的PC端浏览效果，又要使其兼容不同类型的智能终端设备，所以只能在保持原有网站结构的前提下，通过新建样式表来满足智能终端的浏览需求。具体实现过程如下：

（1）分析网站，删减冗余内容。根据移动终端设备受网络和屏幕尺寸限制的特点，其浏览的网页应是最精简的。这就要求我们对原有PC网站进行分析，舍弃页面中起修饰修饰作用，以及次要的内容，保留页面的核心内容。

（2）编写适合于移动终端显示的样式表。精简网站的内容之后，即可编写适合移动终端浏览的CSS样式表。编写时需注意两个要点：其一，对于舍弃的内容，可通过display：none属性值对进行设置，将其隐藏掉；其二，用于布局的div模块，宽度都使用百分比进行设置，实现自适应宽度的流体布局。

（3）根据客户端屏幕尺寸大小，自动应用样式表。在网页页头中的link标签，使用CSS3的media query设置功能，让页面能根据不同设备屏幕尺寸，自动加载对应的样式表。响应式网站通过使用流体布局、媒体查询等技术制作网页，使得网页能够自适应不同的终端设备。它是目前构建兼容PC和智能移动设备网站的最佳方案，也是Web设计的趋势。