`
highfly-s
  • 浏览: 96788 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自适应网页设计

自适应网页 
阅读更多

一、简单描述：
随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。
简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局是基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

二、响应式布局原理：
3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理
第一步：Meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 
第二步：HTML结构
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
第三步：媒介查询-Media Queries
CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

三、响应式布局优点和缺点：
优点：
1. 面对不同分辨率设备灵活性强
2. 能够快捷解决多设备显示适应问题
缺点：
1. 兼容各种设备工作量大，效率低下
2. 代码累赘，会出现隐藏无用的元素，加载时间加长
3. 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
4. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

四、响应式页面资料与实例地址：
1、http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 
2、http://dev.oupeng.com/

五、测试工具地址：
1、http://mattkersley.com/responsive/
2、http://jamus.co.uk/demos/rwd-demonstrations/

分享到：
| 跨浏览器兼容性总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics