【系列】css3响应式布局

响应式布局是现在很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个终端。

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

1.media query:

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

于不同的媒体类型和同一媒体的不同条件

2.语法结构及用法:

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

(1)在link中使用@media:

<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)"href="link.css"/>

(2)在样式表中内嵌@media：

@media screen and (max-width: 600px) {

   选择器 {

      属性：属性值；

   }

}

四、媒体类型

all ：默认。适用于所有设备。

aural ：语音合成器。

braille： 盲文反馈装置。

handheld ：手持设备（小屏幕、有限的带宽）。

projection ：投影机。

print： 打印预览模式/打印页。

screen： 计算机屏幕。

tty： 电传打字机以及类似的使用等宽字符网格的媒介。

tv： 电视类型设备（低分辨率、有限的滚屏能力）

五、可能的操作符