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

网站建设知识 phpacg 2年前 (2018-04-24) 98次浏览 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系统的主流阅读器均至少支持其中一种视频格式,这样关于视频格式的自顺应效果就迎刃而解。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址