响应式布局

优点：

a.面对不同分辨率设备灵活性强
b.能够快捷解决多设备显示适应问题

缺点：

a.兼容各种设备工作量大，效率低下

b.代码累赘，会出现隐藏无用的元素，加载时间长

如何实现：

用CSS3的Media Query(媒介查询)来实现（其实也可以用js实现，不过js这方法是针对低端浏览器的，不考虑）：
设备宽高：device-width，device-height
渲染窗口的宽高：width，height
设备手持的方向：orientation
设备的分辨率：resolution
使用方法：外联，内嵌样式，第三方库（http://www.getbootstrag.com）

 

link里面引用：

1.<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">

2.<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" />

3. 在媒体查询的开头追加 not 则会颠倒该查询的逻辑，使非纵向放置的显示屏设备加载样式文件：

<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" />

4.可以将多个表达式组合在一起：

<link rel="stylesheet" media="screen and (orientation: portrait) and (min- 800px)" href="800wide-portrait-screen.css" >

5.更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。

全部查询都不为真，则不加载。例子如下：

<link rel="stylesheet" media="screen and (orientation: portrait) and (min- 800px), projection" href="800wide-portrait-screen.css" /> 

这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection 之后，没有 and ，也没有任何特性/值的组合。没有后续表达式，意味着只要是 projection 就满足条件。本例中，样式会应用于所有的投影仪。

头部css里面引用：

1.可以在 CSS 样式表中使用媒体查询：

@media screen and (max-device- 400px) {

h1 { color: green }

}

2.@import url("phone.css") screen and (max-360px);--不推荐使用