浅谈网页设计中手机端自适应响应式框架，移动端响应式布局
点击蓝色的字,关注我们
"最近发现很多学习网页前端的朋友都在谈论手机端自适应响应式框架，移动端响应式布局的问题。响应式布局的确是目前网页设计的流行趋势,设计并编写一套能同时适应PC端,手机端,平板等各种不同分辨率多设备终端窗口的网页代码是一件让初学者们足以自豪的事。下面我就网页设计中手机端自适应响应式框架，移动端响应式布局相关问题谈一下自己的一点粗浅认识。”
01
响应式布局的概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
02
设计中响应式布局的利与弊
凡事都有其局限性,响应式布局并非就那么完美!
面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题。这是它在实际应用中的优点,也是设计人员编写它的主要目的。
缺点也很明显!*先需要兼容这么多设备,成型后的代码工作量比起传统方式编写的代码会大不少,效率自然会下降; 同时比起传统代码,响应式布局代码编写明显臃肿,那么网页在加载时自然就会慢一些,影响了用户体验时的流畅度; 而且还有个最为致命问题,比起传统代码编写出来的网页上各种多姿多彩炫酷的效果,响应式布局是不能完美的实现所有效果的,通常我们都是采取折中方式,去掉一些不能同时适应多个设备终端的效果,这样最后呈现出来的网页效果自然会大打折扣。
03
响应式布局的原理
要实现适应多个设备终端,响应式布局需要用到的最为关键的就是CSS3中的Media Query(媒介查询)。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达"大于或等于"和"小于或等于"。如:width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。
01
响应式布局示例
说了这么多,大家可能还是云里雾里,没关系,下面我用一段响应式布局代码示例让大家直观感受它的作用效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>响应式布局</title>
*{margin:0;padding:0;text- decoration:none;list-style:none;
font-size:14px;font-family:"微软雅黑";text-align:center;
color:#fff;}
.clear{clear:both;}
#header,#content,#footer{margin:0 auto;margin-top:10px;}
#header,#footer{margin-top:10px;height:100px;}
#header,#footer,.left,.right,.center{background:#333;}
/*通用样式*/
/*手机*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;}
}
</style></head>
</body>
将上面这段代码复制并以.html的后缀格式保存在记事本上,然后将它运行在浏览器上,随意拖动显示器分辨率大小模拟多设备运行环境,你将发现这段代码的显示效果会随着分辨率的大小变化自动适应。
<metaname="viewport" content="width=device-width, initial-scale=1.0">这段代码的作用就是定义自适应框架,紧接着后面就是多设备的运行样式。
每一个对应的运行设备(手机,PC,平板)样式下面必须加上 @media screen and (max-width:600px),这个就是媒介查询,在页面加载时终端就是通过它来判断并执行不同设备的显示样式。
值得注意的是,在手机端运行时,我们要禁止用户随意缩放屏幕,因为那样做可能会导致界面显示错位。原因就是过于小的显示分辨率已经超过了样式中的界定值。
解决的办法就是在里的代码里加上<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
这段代码的作用就是禁止在手机端运行时用户随意缩放屏幕大小。
想了解更多关于网页设计,网页前端,欢迎咨询我们!
武汉清美教育,专业网页设计师的摇篮。设计教育,我们是认真的。
武汉清美CG学院，常年开设设计短期班、双证班，了解更多设计资讯，全面把握设计行业动态，提升设计专业能力水平，解决设计专业就业难题，来武汉清美CG学院报名。武汉设计培训
你可能错过的
◆超现实主义艺术家Kota Yamaji，打造梦幻的艺术设计**
免责声明：本站所有内容及图片均采集来源于网络，并无商业使用，如若侵权请联系删除。
上一篇：上海网站建设制作有几种
下一篇：制作手机网站的10个注意点
