现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询)。

  介绍:媒体查询属性可以帮助前端开发人员根据屏幕的大小改变dom元素的css属性,从而做到响应式开发。

  浏览器支持情况:css3新特性@media(媒体查询)-LMLPHP,可以看到大部分浏览器都支持媒体查询的属性,但是很遗憾ie 9一下不支持css3的媒体查询属性。

  ie6-ie8的支持方法:我们可以在页面中添加如下两个js脚本就可以是ie6-ie8支持媒体查询。代码如下

  

1   <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

  使用方法:

    1)在页面head标签中添加如下标签

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

    2)在css文件中使用media属性,代码如下

 @media (min-width: 1200px) {

   .content {
padding-left: 200px;
padding-right: 200px;
}
}
@media (min-width:960px) and (max-width:1200px){ .content {
padding-left: 80px;
padding-right: 80px;
}
}

            

04-29 04:47