伴随我国互联网技术的快速发展与应用, 特别移动互联网技术和智能终端的应用, 一度催生了我国数量规模庞大的移动互联网用户, 移动终端以其便于携带、操作简便成为人们上网浏览信息、观看视频等的最主要设备;相比传统网站、网页在桌面式电脑上的显示, 传统网站、网页在移动智能终端上的显示却出现了一些新的问题, 其中一个最主要的问题就是由于移动智能终端设备种类的繁多、屏幕分辨率多的样化及操作系统各异等原因, 导致传统网站、网页内容无法做到在移动智能终端设备上的正常完美显示, 即传统网站、网页内容无法完全适应移动终端屏幕尺寸问题。鉴于上述问题的存在, 美国著名的网页设计工程师Ethan Marcotte提出了“自适应网页设计”技术, 旨在从传统网站、网页设计的优化角度解决网站、网页不能很好适应移动终端显示问题;该设计技术的主要理念是通过集中创建网站、网页等相关页面的图片大小、排版布局等, 达到可以智能的依据用户行为和使用设备环境自动调整相应布局。
自适应网页设计所涉关键技术
1、媒体查询技术
所谓媒体查询主要是是指通过不同的元素类型、条件定义样式表的规则, 之所以这样做, 是因为这样可以使CSS3更加精准的作用于同一元素的不同条件及不同类型的元素, 从而达到在不修改任何页面内容前提下直接、正常显示在不同操作系统类型及尺寸的移动终端屏幕上。
2、流动布局技术
流动布局是通过智能使用Div、数学计算和百分比创建的, 主要利用相对尺寸及结合百分比等功能, 再通过简单分割寻找到与移动终端屏幕相适应的宽度, 能够保证设计的网页适应不同操作系统类型、不同分辨率及屏幕尺寸的移动终端。该技术还一个优点就是有很好的跨浏览器兼容性, 而一旦出现问题也很容易修复。
3、HTML5技术
HTML5技术有万维网核心语言之称, 是超文本标记语言HTML第五次修改而成;HTML5具有简易性、支持视音频、代码清晰, 以及存储灵活、人机交互性好等优点;对于HTML5的技术优势更多体现在专门针对移动设备网页的设计开发上, 甚至可以在网页上直接修改、调试
4、 CSS3技术
CSS又称层叠样式表, 层叠样式表技术能够精确、有效控制网页页面的布局、字体、颜色和背景等;CSS3是CSS层叠样式表技术的升级版本, 模块化是升级后该技术的主要特点;基于模块化的应用能够有效提高网页页面性能、降低网页文件大小, 以及提升网页加载速度, 最重要的是能够自行调整网页布局、尺寸, 以适应移动终端显示所需。
2 自适应网页设计技术开发应用
人们使用移动终端上网, 除了阅读文字、图片信息外, 一个重要应用就是观看视频;而在网页中视频显示较文字、图片显示更复杂, 相应视频自适应实现起来也更复杂, 加之本地视频和远程视频在自适应实现上也不尽相同;我们可以说, 如果实现了视频自适应, 那么其他文字、图片等页面元素的自适应也就不成为问题。
本地视频自适应网页设计方法
(1)、媒体查询技术实现方法:可以使用在本地视频文件上添加媒体查询规则的方法实现, 当移动终端设备中的视频与添加的媒体查询规则相匹配时立即加载相应视频。
(2)、流动布局技术实现方法:除了上述媒体查询技术方法, 还可以通过用CSS指定视频文件流媒体尺寸方法实现。
2 远程视频自适应网页设计方法
(1) 、用Fit Vids插件实现远程视频自适应:网页中的远程视频自适应可以借助于一个名为Fit Vids插件实现。
(2) 、用流动布局技术实现远程视频自适应:为保证远程视频能够自适应移动终端等屏幕的宽度, 可以先用<div>标签将<iframe>包装起来, 并定义合适的样式;同时指定60%填充底部;然后用100%宽度、100%高度、绝对位置指定子元素的尺寸, 以使被嵌入的元素可以自动扩展到最大宽度。具体代码有CSS3代码和HTML5代码两部分;其中CSS3代码部分主要用来控制远程视频的载入及宽高比等, 而HTML5代码部分主要控制视频显示分辨率及负责视频地址的连接。
CSS3主要基于不同视频文件的宽高比例有所不同而设计使用, 对于标准视频文件, 其宽高比4∶3, 而对于宽屏模式, 其宽高比为16∶9。而对于上述HTML5代码中, 宽高像素比是640∶480, 即是我们所说的宽高比4∶3, 那么相应CSS3中padding-bottom的值应为75%;如果当视频宽高比是16∶9时, 相应CSS3中padding-bottom的值则需要修改为56.25%;再就是需要根据所要显示视频文件像素大小来修改HTML5代码中<iframe>内视频文件的宽度、高度等属性。