您所在的位置： &
如何将官方网站移植成移动Web网站（1）
如何将官方网站移植成移动Web网站（1）
电子工业出版社
《HTML5移动Web开发指南》第6章移动Web界面样式，本章主要介绍可以在移动Web应用中使用的CSS3新特性，同时还介绍如何使用Media Queries样式模块在传统网站的样式结构下增加移动Web版本网站。本节为大家介绍如何将官方网站移植成移动Web网站。
6.6.5& 如何将官方网站移植成移动Web网站（1）
接下来，让我们来看一下如何将一个真正的网站实现为移动端的Web网站版本。如图6-4所示是遇见官方网站（）的首页在浏览器下的显示效果。
从图6-4可以看到，首页区域一共分成5部分。第一部分是页面的顶部，这部分主要是显示Logo及导航栏。第二部分是介绍遇见社交软件的展示区域以下载链接提示，属于介绍区域。第三部分则是介绍遇见社交软件的特性部分。第四部分主要是合作伙伴相关的友情链接。最后一部分则是页面的底部，该部分主要显示版权相关信息。
这是一个非常普通的Web页面，现在我们根据这四部分的页面区域内容来分析如何将整个页面转换成移动版本的首页。
图6 4& 遇见官方网站首页显示效果图
1．导入Media Queries样式文件
在首页的HTML文件的head元素内新增以下Media Queries样式文件模块：&rel="stylesheet"&type="text/css"&&&&&media="only&screen&and&(max-width:480px),only&screen&and(max-device-width:&480px)"&&&&&href="/resources/style/device.css"&
2．首页HTML源码
接着来看一下首页的HTML代码，如代码6-1所示。
代码6 1& 首页的HTML代码&!DOCTYPE&html&&&&charset="UTF-8"&&&name="keywords"&content="遇见&iphone&Android&symbian陌生人"&&&name="description"&content="遇见是一款是基于附近陌生人的社交应用，帮助你与你不认识的、但就在附近的人进行即时沟通。"&&&name="viewport"&content="width=device-width"&&&&&遇见&-&基于附近陌生人的社交应用&&rel="stylesheet"&href="/resources/style/base.css"&type="text/css"&&&rel="stylesheet"&href="/resources/style/style.css"&type="text/css"&&&rel="stylesheet"&href="/resources/style/home.css"&type="text/css"&&&!--[if<e&IE&9]&&&&&&rel="stylesheet"&href="/resources/style/style-ie.css"&type="text/css"&&&&&&&src="/svn/trunk/html5.js"&&&&&&![endif]--&&!--[if<&IE&8]&&&&&&rel="stylesheet"&href="/resources/style/style-ie6.css"&type="text/css"&&&&&&&![endif]--&&rel="stylesheet"&type="text/css"&&&&&&&media="only&screen&and&(max-width:480px),only&screen&and(max-device-width:&480px)"&&&&&&&href="/resources/style/device.css"&&&&&&&&class="header"&&&&&&&&&&class="logo"&&&&&&&&&&&&&&class="header-nav"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="selected2"&href="#"欢迎使用&&&&&&&&&&&&&&&&&&&&&&href="download.html"免费下载&&&&&&&&&&&&&&&&&&&&&&href="faq.html"遇见FAQ&&&&&&&&&&&&&&&&&&&&&&href="http://bbs.iaround.net"官方论坛&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="followme"&&&&&&&&&关注我们&&&&&&&&&&target="_blank"&href="/iAround"&width="29"&height=&"29"&src="/resources/images/sina.gif"&title="关注我们的新浪微博"&align="top"&&&&&&&&&&&target="_blank"&href="/iAround"&width="29"&height=&"29"&src="/resources/images/qqwb.gif"&title="关注我们的腾讯微博"&align="top"&&&&&&&&&&&&class="mobile"&&&&&&&&&&class="d_img"&&&&&&&&&&class="d"&&&&&&&&&&&&&&width="280"&height="179"&src="/resources/images/feature.jpg"&&&&&&&&&&&&&&&class="download"&href="download.html"&&&&&&&&&&&&&&class="app_tips"&width="180"&height="47"&src="/resources/images/&app_tips.jpg"&&&&&&&&&&&&&&&class="app_type"&&&&&&&&&&&&&&&&&&class="app_ip"&href="/cn/app/&iaround-chat-with-people-nearby/id?l=en&mt=8"&&&&&&&&&&&&&&&&&&class="app_az"&href="/dl/iaround.apk"&&&&&&&&&&&&&&&&&&class="app_sb"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="intro"&&&&&&&&&&&&&&&&&&&&&class="title"&&&&&&&&&&&&&&class="content"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="i1"无须注册登录遇见使用全新的技术，无须注册也无须登录，下载***后即可使用，即使您的手机重新刷机或***系统，只需重新***遇见客户端，之前的所有账号信息同样保留。&&&&&&&&&&&&&&&&&&&&&&class="i3"简单快捷流畅遇见无须查找好友、无须关注任何人，即可与附近的陌生人进行聊天，聊天人数在15个左右。超过这个数字的人系统自动创建新的房间，解决了聊天室拥挤问题，让聊天更流畅。&&&&&&&&&&&&&&&&&&&&&&class="i5"丰富便捷聊天方式遇见支持发送图片、发送地理位置、发送视频、发送语音，更有500+的聊天表情，让用户之间的沟通更加丰富、便捷。&&&&&&&&&&&&&&&&&&&&&&class="i7"照片分享用相片连接全世界爱好摄影的陌生人，把他们变成好朋友和彼此吹捧的粉丝，让影像成为他们唯一对话的语言，通过遇见的附近照片的功能，无论你走到世界哪里，都可以查看本地附近有哪些照片。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="i2"邂逅聊天遇见是基于附近陌生人的社交应用，帮助你与你不认识的、但就在附近的人进行沟通。系统会根据用户的年龄、性别、星座、职业、兴趣、教育等信息，优先自动配对最适合的且在附近的一群人进行交流和沟通。&&&&&&&&&&&&&&&&&&&&&&class="i4"跨平台遇见将会陆续推出iPhone版、Android版、Symbian、iPad、黑莓版本、winPhone版本，实现移动设备的全平台，不管您的朋友使用什么手机，都可以使用遇见。&&&&&&&&&&&&&&&&&&&&&&class="i6"多语言遇见已有简体中文版、繁体中文版、英文版多语言版本。即将推出日文版、韩文版、西班牙文版、法文版、德文等版本，面向全球用户。&&&&&&&&&&&&&&&&&&&&&&class="i8"免费短信您不仅可以与附近的陌生人交友聊天，还可以免费向手机通讯录中的好友发送短信消息，支持推送功能，所以有人来消息后可以像标准短信一样显示在手机上，不用担心漏看消息。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="footer"&&&&&&&&&&&&&&&&&&class="friendlink"&&&&&&&&&合作伙伴：&&&&&&&&&&&!--&此部分略去所有友情链接代码&–-&&&&&&&&&&&&&… &&&&&&&&&&&&&&&&&&&&class="footer"&&&&&&&&&&class="bg"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&关于我们|服务条款|联系我们|遇见帮助&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class="copyright"&&&&&&&&&&&&&&&&Guangzhou&Zoega&Information&Technology&Co.,&Ltd.&版权所有&粤ICP备 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
【责任编辑： TEL：（010）】&&&&&&
关于&&&&的更多文章
本书的重点是使用HTML5、CSS3 及JavaScript 等Web 标准来为iOS
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
享誉全球的未来学家理查德.沃森，用科学和多元的视角
本书是图文并茂的Python学习参考书，书中并不包含深奥
对于任何一门编程语言来说，算法都是程序的"灵魂"。正
本书依据最新版《软件设计师考试大纲》的考核要求，深入研究了历年软件设计师考试试题的命题风格和试题结构，对考查的知识点进行
51CTO旗下网站