一、简单描述：
随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。
简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局是基于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/
相关推荐
### Google网页自适应网页设计指南解析 #### 一、自适应网页设计概念 自适应网页设计（Responsive Web Design，简称RWD）是一种让网站能够根据不同设备屏幕尺寸自适应展示的技术。这种方式通过使用灵活的布局、...
屏幕自适应网页设计是现代网页开发中的核心技术，旨在确保网页在不同尺寸的设备上都能提供良好的用户体验。随着移动设备的普及，尤其是智能手机和平板电脑，网页设计必须考虑到这些设备的多样化屏幕尺寸。本文主要...
自适应网页设计是一种现代网页开发技术，旨在提供跨设备、跨平台的良好用户体验。它通过灵活的布局、响应式图像和媒体查询等手段，确保网页在各种屏幕尺寸的设备上都能呈现出最佳的显示效果，从桌面电脑到智能手机，...
源码下载联系博主
自适应网页设计是一种现代网页开发技术，它使得网页可以适应不同设备和屏幕尺寸，提供一致且良好的用户体验。在这个“自适应网页demo实例”中，我们可以深入理解如何利用HTML和相关技术来创建这样的页面。 首先，...
在IT行业中，自适应网页设计（Responsive Web Design, RWD）是现代网页开发的重要概念，它使得网站能够根据用户使用的设备类型（如桌面电脑、平板电脑、智能手机等）自动调整布局、图片大小和功能，提供良好的用户...
自适应网页设计是一种确保网页在不同设备上呈现良好效果的技术，它主要通过一系列技术手段实现网页内容和布局的动态调整，以适应不同尺寸的屏幕。以下是对标题和描述中涉及的知识点的详细解释： 1. **Viewport元...
5. 自适应设计：自适应网页设计是一种响应式设计方法，它使网页可以根据用户的设备和浏览器窗口大小自动调整布局。在这个焦点图中，图片的大小和布局会随着窗口的宽窄变化而变化，确保无论在何种设备上，图片都能...
自适应网页设计（Responsive Web Design，简称RWD）是一种网页设计技术，旨在解决网页在不同尺寸设备上的显示问题。随着3G网络的普及和移动设备的广泛应用，网页设计师面临着如何在手机、平板电脑和桌面电脑等不同...
自适应网站代码是一种现代网页设计技术，旨在提供跨设备、跨屏幕尺寸的流畅用户体验。这种技术的核心在于，网站布局能够根据访问设备的特性自动调整，无论是大屏幕的台式机，还是小屏幕的手机或平板电脑，都能呈现出...
该系统不仅具备基本的文字转语音功能，还支持自适应网页设计、多级目录上传管理以及个性化页面主题切换等功能。 #### 二、关键技术点与实现机制 ##### 2.1 自适应网页设计 自适应网页设计（Responsive Web Design...
【自适应网页设计】是指网页能够根据用户使用的设备屏幕大小自动调整布局，提供一致的用户体验。这一设计理念由Ethan Marcotte在2010年提出，目的是解决网页在不同尺寸设备上显示效果不佳的问题，特别是在移动设备日...
2. **自适应布局**：自适应网页设计（Responsive Web Design，简称RWD）是现代网页开发的核心技术之一。它允许网页根据访问设备的屏幕尺寸和方向自动调整布局，确保内容在手机、平板电脑、桌面电脑等不同设备上都能...
2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面有六个人的头像。如果屏幕宽度大于1300像素，则6张...
自适应网页设计（Responsive Web Design，简称RWD）是一种让网站在不同设备上展示良好效果的技术。通过灵活的布局、媒体查询和响应式图片等方法，确保网页在手机、平板、桌面电脑等不同屏幕尺寸下都能提供优秀的用户...
自适应网页设计（Responsive Web Design，简称RWD）是一种使网页在不同设备上展示良好且用户体验一致的技术。它允许网页根据用户使用的设备（如桌面电脑、平板、手机）的屏幕尺寸和方向进行动态调整。标题“制作...
本书记录了渐进增强的起源，其原理和机制，并揭示了无数实用方法，您可以使用HTML，CSS和JavaScript应用渐进增强原理。