css3响应式布局

什么是响应式布局？

        响应式布局的设计方案，是为解决当今各式各样的浏览器分辨率以及不同移动设备的显示效果而产生的，所谓响应式布局，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，也就是说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个终端。

css3是通过media Query实现响应式布局的，所谓media Query就是通过不同的媒体类型和条件定义样式表规则，媒体查询让css可以更精确的作用于不同的媒体类型和同一媒体的不同条件。

它的语法结构和用法如下：

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

说明：语法为@符加关键字media，后面为设备名和选取条件，多个设备之间用逗号连接

1.在link中使用@media：

例如：

<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="1.css" /> 2.在样式表中内嵌@media

例如：

@media screen and (max-width:600px){ div{ border:1px solid #000; } }

说明：

screen：表示媒体类型是screen；

and：可能的操作符，类似的还有not，only；

max-width:600px是媒体特性，就是媒体条件；

媒体类型：

可能的操作符：

属性值：