当前位置:网站首页 / 自适应网站模板 / 正文

自适应网页设计在网站建设中的应用

时间:2016年04月12日 | 作者 : mobandashi.com | 分类 : 自适应网站模板 | 浏览: 1431次 | 评论 0

一、自适应网页设计概述

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

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

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

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

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

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

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

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

  (1)Meta viewport标签的使用。

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

  <meta name=“viewport”content=“width=device-width,initial-scale=1”/>

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

  (2)Media query的使用。

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

  <link rel=“stylesheet”type=“text/css”media=“screen and(max-device-width:320px)”href=“smallScreen.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系统的主流浏览器均至少支持其中一种视频格式,这样对于视频格式的自适应问题就迎刃而解。


猜你喜欢

    联系我们
  • 联系电话
  • 联系我的QQ
  • 电子邮件
标签列表
最近发表