响应式布局1

响应式布局
1、响应式布局是什么？
响应式布局是网页对不同的设备都能展示良好的效果的一种布局方式。
2、如何实现响应式布局？
关键点：
a)各设备样式的自动匹配,即判断设备类型并使用对应设备的样式
b)不修改DOM结构而调整布局
对于第一点的实现，主要是基于CSS3的Media Query属性，为不同的分辨率设定不同的样式。
对于第二点主要是基于页面的宽度设置由”固定”方式改为”液态”(流式布局:所有参与布局的DIV都用float:left，宽度都用百分比表示)，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。
下面分别分析这两点的实现:
2.1、CSS3之media query属性
CSS3的media query属性是CSS2的media type属性的增强版，使media type可以进行条件判断并输出对应的样式。那么如何使用media query呢？
2.1.1、media query根据分辨率引入不同的外部样式文件
方法如下：

<link rel=”stylesheet” type="text/css" media=”screen and (判断条件)” herf=”需要调用的样式表文件” />

或者

<link rel=”stylesheet” type="text/css" media=”all” herf=”需要调用的样式表文件” />

或者

<link rel=”stylesheet” type="text/css" media=”print” herf=”需要调用的样式表文件” />

或者

<style type="text/css" media="screen">@import url("需要调用的样式表文件")</style>

或者

<style type="text/css">@media screen{//css}</style>

以frontopen首页为例:

<link rel="stylesheet" type="text/css" media="all" href="http://www.frontopen.com/wp-content/themes/frontopen/style.css?ver=1.5.04.15" />

下面介绍media属性：
media属性用来指定特定的媒体类型，如屏幕screen、打印机print、all所有媒体类型。其中可以添加不同的表达式来检查此媒体特型是否符合某些条件，如果符合则使用对应的样式文件。
media可取值如下：
all:所有媒体类型
screen:屏幕
print:打印机
braille:盲文
embossed:盲文打印
speech:演讲
tty:打字机
tv:电视
projection:幻灯
handheld:手持设备

参考文章：
1.想学习超流行的响应式设计？来看看这篇教程
2.使用@media screen解决移动web开发的多分辨率问题