理解响应式布局设计
当我们谈到响应式布局时,大家对这一概念已经有了一定的认知.如今非常流行的一项设计理念就是响应式布局.为此,设计师们提出了相应的解决方案.今天就让我们来探讨一下这一概念:什么是响应式布局?它的优点和缺点有哪些?如何在设计中实现这一目标(采用CSS3 Media Query技术).
请阐述响应式布局的概念及其发展背景。
该技术由EthanMarcotte于2010年5月首次提出。
概述一下的话，则是一个网站能够适应多种终端访问需求——而非专为每个终端定制独立版本。
此概念应运而生以解决当前移动互联网浏览挑战。
这种设计不仅提升了用户体验感。
不可忽视的趋势表明这一技术正在迅速改变现代Web设计领域的发展格局。
通过这一技术的设计理念与实现方式可以看出，在未来 responsive design 将会成为主流。
响应式布局有哪些优点和缺点？
优点：
对于不同分辨率的需求具有良好的应对能力；能够提供快速实现多端适配的有效方案。
缺点：
满足多种终端需求会带来较大的工作量；可能导致冗余代码生成，并增加加载时间。
实际情况下而言，在兼顾各方因素的基础上难以达到完美的效果；这种方案可能会对原有布局结构造成一定影响；在一定程度上可能会影响用户体验
如何实现响应式布局？
什么是 CSS 中的 Media Query（媒介查询）？根据不同的媒体类型及特定条件来设定样式表规则。 MediaQuery 使得 CSS 能够更加精准地应用到不同类型的媒体以及同一介质下的不同条件。 MediaQuery 中大多数 media 属性采用 min 和 max 来表示 '大于或等于' 以及 '小于或等于' 。同样地，在 HTML 和 XML 中也可以应用这些 media queries。利用这一属性，在各个设备上构建多样化的界面设计变得异常简便。
2、media query能够获取哪些值？
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。
3、语法结构及用法
1
@media 设备名only （选取条件）not （选取条件）and（设备选取条件），设备二{sRules}
示例一：在link中使用@media：
1
@media (
minimum device dimension of 1024 pixels
and maximum width of 989 pixels),
screen, along with (
maximum device dimension of 480 pixels)
),
(
maximum device dimension of 480 pixels
and orientation:landscape)
,
(minimum device dimension of 480 pixels)
and (
maximum device dimension of 1024 pixels)
and (
orientation:portrait)
{
srules
}
例如，在示例二中
4、可用设备名参数：
5、逻辑关键字：
最终阶段的任务是验证我们设计好的Media Queries。考察这些 Media Queries 在不同设备上的表现情况。我们可以借助一个在线工具Responsivator 来实现这项功能。下面向大家演示一款非常实用的在线工具——Responsivator。该工具能够模拟各种移动设备及其对应的屏幕尺寸设置，并且允许用户根据需求预先设定各个屏幕尺寸的表现模式。用户只需提供具体的 URL 地址（例如 http://127.0.0.1/）或者本地服务器地址即可开始测试工作
基于Media Queries实现响应式布局设计
参数设置∶ viewport的水平维度(width)；viewport的垂直维度(height)；初始缩放比值(initial-scale)；最小可缩放比例(minimum-scale)；最大可缩放范围(maximum-scale)；用户是否具备自动调节能力(user-scalable)
针对IE浏览器不支持Media Query的情况，我们可以引入JavaScript库的方式实现解决方案。具体的引用方法是在页面的头部添加相应的脚本链接。例如：