百易互通联系电话
当前位置 当前位置: 首页 > 网络学院 > 建站知识 >

网站建设中如何使用自适应网页设计?

点击: 作者:admin 时间:2015-05-08 22:25

  一、自适应网页设计概述

  1.自适应网页设计的概念

  自适应网页设计,也称作“响应式Web设计”。这个理念的核心是无论用户使用的是笔记本、平板,还是各种类型的智能手机,设计的网页都能够自动识别各种设备的屏幕尺寸,并自动切换显示分辨率,图片的尺寸以及相关脚本功能等,使得网页自动适应设备环境,在设备上呈现最优化显示。

  2.自适应网页设计的基本原理

  自适应网页设计之所以能够针对不同设备、不同尺寸的屏幕进行自适应,其原理就是针对不同分辨率的屏幕设计CSS规则,在加载网页前先检测设备屏幕分辨率,并选择合适的CSS规则渲染网页。

  在自适应网页设计中,需要在加载网页前对设备屏幕分辨率进行检测,这个就需要运用到媒体查询技术。媒体查询是CSS3中新增的功能,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

  通过媒体查询判断出用户设备的分辨率后,需要调用相应的CSS样式渲染网页,在具体的CSS样式设计中通常使用流动布局的方式。流动布局使用百分比来确定每个部分在屏幕上的相对宽度,由此就能够轻松地实现自适应用户设备的分辨率。

  二、自适应网页设计技术应用实践

  1.跨终端自适应应用实践

  (1)Meta viewport标签的使用。

  在网页的部分添加meta标签,示例代码:

  

  ,其中viewport是网页默认宽度与高度,content中设置将默认宽度调整为屏幕宽度,并将原始缩放比例(initial-scale)设置为1,即网页初始大小占屏幕的百分之百。

  (2)Media query的使用。

  通过媒体查询自动探测屏幕宽度,然后加载相应的CSS文件。示例代码:

  。

  通过媒体查询,如果检测的屏幕宽度小于320像素,那么将加载smallScreen.css样式来渲染网页。

  (3)CSS设计与引用。

  针对不同的设备分辨率,设计并引用相应的CSS样式,示例代码:

  @media screen and(max-device-width:320px){...}

  在CSS样式文件中引用@media,并针对该分辨率下设计相关样式。

  2.图片的自适应应用实践

  在精品课程网站建设中,为了使图片支持移动端设备,也采用了自适应设计。相关技术处理示例:

  img { max-width:100%;}

  这里使用了浮动布局的设计理念,使用百分比设置,能够按照比例进行自动缩放。

  3.微课视频的自适应应用实践

  (1)视频尺寸适应问题的处理。

  对于这个问题,类似于图片处理的方式,通过流动布局方式,限定对象的最大宽度为100%来实现自适应宽度的问题。

  (2)视频格式适应问题的处理。

  对于不同的终端对于视频格式的支持不同的问题,应用Html5中的video标签来解决。该标签支持同时链接ogg,mpeg4,webm三种格式的视频文件,而无论是苹果还是安卓还是windows系统的主流浏览器均至少支持其中一种视频格式,这样对于视频格式的自适应问题就迎刃而解。


   
典型案例 MORE>>
 

咨询热线
0755-61603023

微信扫一扫
了解更多服务!