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

　　一、自顺应网页设计概述

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

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

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

　　自顺应网页设计之所以可以针对不同设备、不同尺寸的屏幕停止自顺应，其原理就是针对不同分辨率的屏幕设计CSS规则，在加载网页前先检测设备屏幕分辨率，并选择适宜的CSS规则渲染网页。

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

　　经过媒体查询判别出用户设备的分辨率后，需求调用相应的CSS样式渲染网页，在详细的CSS样式设计中通常运用活动规划的方式。活动规划运用百分比来确定每个局部在屏幕上的相对宽度，由此就可以轻松地完成自顺运用户设备的分辨率。

　　二、自顺应网页设计技术运用实际

　　1.跨终端自顺应运用实际

　　（1）Meta viewport标签的运用。

　　在网页的<head>局部添加meta标签，示例代码：

　　，其中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系统的主流阅读器均至少支持其中一种视频格式，这样关于视频格式的自顺应效果就迎刃而解。