伊春广电网手机网站页面设计与应用
开篇：润墨网以专业的文秘视角，为您筛选了一篇伊春广电网手机网站页面设计与应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘 要 本文分析了手机页面设计与传统电脑页面设计的不同；并应用自适应页面设计思想，通过对响应式布局和自适应布局的对比论述，找到了简便易行，适合中小网站操作的手机页面编写方法。
关键词 手机网页设计；自适应页面设计；响应式布局；自适应布局；自动跳转
中图分类号TP39 文献标识码A 文章编号 1674-6708（2014）116-0229-02
0 引言
根据国家统计局2014年2月份的2013年国民经济和社会发展统计公报显示，截至2013年底我国有超八成网民通过手机上网。随着人们上网习惯的改变，用户对网站的浏览体验也有了新要求：除了要有良好的电脑版浏览体验外，也要在各种移动终端都要有良好的浏览体验。伊春广电网是虽属偏远地区的中小型网站，但是随着移动互联网进程的不断加快和智能终端的大范围普及，我们也面临着同样的用户需求。
虽然电脑版网页也可在手机上浏览，但是由于屏幕、操作系统和方式等的改变，问题也就随之而出，例如：由于手机屏较电脑屏尺寸小很多，电脑版页面经手机浏览器整体缩小后，内容难以看清，手动放大后，横向滚动条又出现，影响用户的浏览体验；电脑版页面的弹窗和FLASH等行为不仅浪费流量、影响网页下载时间，而且在手机上的兼容性不好；电脑版页面的信息模块和按钮多，在触控屏上不便操作等。针对上述问题及不足，专门编写一个适合各种移动终端的网页是十分必要的。下面对页面设计编写过程中遇到的与传统电脑页面不同的主要技术问题做了详细论述与解答。
1 手机页面设计中与传统电脑版页面的几点不同
1.1 布局
手机版应将网站LOGO、主要功能按钮和导航链接都放在页头，并做到尽量精简，方便用户在小屏上也能快速找到所需内容；为避免产生横向滚动条，中间内容区域每行显示图片不超过两张；考虑到不同手机显示的差异，页面不要太过复杂的颜色。
1.2 避免采用弹窗、FLASH、JAVA等行为
这样既节省了流量和网页的下载时间，又规避了一些因手机浏览器的不兼容而产生的问题。
1.3 内容组织
由于手机屏幕的局限性和用户访问手机页面的习惯是利用零碎时间访问居多，手机页面的栏目模块进行重新筛选和设置，充分考虑各栏目节目的关注度差异，使得重点节目、精品栏目一目了然。考虑到移动端设备触控操作的特点，将操作界面功能设置也应精简。
2 手机页面的代码实现与传统电脑版页面的不同
2.1 自适应网页设计代码实现
编机代码的时候，我们会发现各种移动终端的屏幕尺寸各异，如何在大小迥异的手机屏上实现页面尺寸的自适应，就需要通过自适应网页设计来实现。
自适应网页设计简而言之，就是一个网站能够兼容多个终端――而不是为每个终端做一个特定的版本。它的实现有两个基础条件，第一是设置Viewport meta标签，第二是媒体查询。基于这种技术的页面布局目前广泛应用的主要有自适应布局（固定断点）和响应式布局（流体网格）两种。
响应式布局要比自适应布局更灵活，更能充分贴合各种屏幕，给用户带来更加舒适的浏览体验。但在某些情况下自适应布局更切实际。
自适应布局可以让你的设计更加可控，因为这种布局考虑的状态相对较少。但在响应式布局中你可能需要面对非常多状态，这样既在设计编写的过程中难以预测把握，又给后期测试带来许多麻烦。比较之后，我们发现自适应布局实施起来代价更低，测试更容易，也是中小网站更切实际的解决方案。它在资源有限的情况下，特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。所以伊春广电网为移动终端新增的手机页面采用自适应布局。
具体的实现代码如下：
1）允许网页宽度自动调整
首先，在网页代码的头部对Viewport meta标签的device-width等属性进行设置。
令网页宽度默认等于屏幕宽度，并使原始缩放比例、最大最小缩放比例均为1，禁止手动缩放。
2）不使用绝对宽度
具体说，CSS代码不能指定像素宽度：width：xxx px；
只能指定百分比宽度：width： xx%；或者width：auto；
3）使用最大最小宽度属性
宽度值采用相对宽度，虽然解决了页面元素的自适应问题，但是在大尺寸屏幕上也同样面临图片失真等问题。为了解决这个问题，我们采用了最大最小宽度属性。代码示例如下：
.lim-content{min-width：300px；max-width：984px；margin：0 auto；padding：0 20px}
设lim-content的最大最小宽度分别为984px和300px，左右内边距为20px。当屏宽超过984px后，lim-content的宽度为定值984px，lim-content里包含的图片等子元素不会因屏幕过宽而失真。
4）使用媒体查询
虽然面对不同网络设备，我们不像流动网格那样来整体改变内容模块的位置，但是依旧使用了媒体查询来根据不同屏宽进行页面内容边距等的设定。
通过媒体查询可以做到对页面布局的进一步细化。我们可以通过媒体查询根据不同的屏宽对页面元素的CSS样式进行不同的设定，包括图片、文字等。而相对自适应布局来讲，响应式布局是利用媒体查询，对页面元素的位置进行了更为细化的处理。简单来讲就是主要利用float属性将一行中放不下的元素自动滚动到下一行显示，从而实现流动布局。不过要真正的做到全面实现响应式布局，细致的工作还有很多。
2.2 手机访问网站自动跳转到手机版
网站在原有电脑版的基础上增加了手机版页面，虽然手机版页面有独立的网址，但是要让访客记住两个网址，既麻烦又不现实。所以我们电脑版主页增加了自动跳转代码，实现手机用户访问电脑版时向手机版页面自动跳转。
3 结论
伊春广电网手机版页面的开通，为移动终端用户浏览网页带来更舒适的浏览体验的同时，也为网站自身提供了新的平台，增加网站整体的访问量和影响力。但是，伊春广电网作为一家中小型网站，在有别于传统电脑页面的手机版页面设计编写中，也遇到了一些新问题。我们利用中小网站有限的技术资源，研究借鉴主流网站手机页面的风格和先进技术，并对其进行剖析吸取转化形成了中小网站易于操作的技术，实现了同大站相近的功能实现。这即是我们做为一个中小网站在面对移动终端多样性的现状时的探索；也是在人们上网习惯向移动端转移的趋势下，所有中小网站的必经之路。
参考文献
[1]陈立欣.手机网站建设需求调研与分析.科技资讯，2013（4）.