响应式布局

　　响应式布局是现在很流行的一个设计理念，随着移动互联网的盛

行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效

果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是

一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个

终端。

 

响应式布局的优缺点

优点：

　　面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题

　　根据不同的显示器调整设计最适合用户浏览习惯的页面

缺点：

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

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

　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

　　因为要适应不同的设备，页面的结构可能会有所不同，会导致页面的辨识度不强

 

利用CSS3-Media Query实现响应式布局

1、media query：

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

 

2、语法结构及用法

　　@media 设备名 only （选取条件） not (选取条件) and （设备选取条件），设备二 {sRules}

　　(1)在link中使用@media：

　　（2）在样式表中内嵌@media：

 

 

 

特殊设备检测

1.Phone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"

type="text/css" href="iphone4.css" />

2.iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"

type="text/css" />

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"

type="text/css" />

3.android

/*240px的宽度*/

<link rel="stylesheet" media="only screen and (max-device-width:240px)"

href="android240.css" type="text/css" />

/*360px的宽度*/

<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-

width:360px)" href="android360.css" type="text/css" />

/*480px的宽度*/

<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-

width:480px)" href="android480.css" type="text/css" />