将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设计的趋势。
领取专属 10元无门槛券
私享最新 技术干货