CSS 根据不同分辨率 用不同的图片

在css2中允许我们使用media的属性，例如使用screen和print，我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章，关于css2中的media文章，推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print，而且支持多媒体多分辨率的样式表。

我们先来看下CSS3 Media Queries的演示实例：http://js8.in/mywork/css3media.html，来自于（Web Designer Wall）

Max Width

故名思意，就是最大宽度的意思，例如下面的代码是在宽度小于600px的时候才执行的。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

也可以在link标签里面使用media属性，即下面的写法：

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

Min Width

跟Max Width相反，是最小宽度，例如当宽度大于900px的时候才运行下面的代码

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

也可以在link标签里面使用media属性，即下面的写法：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="big.css" />

Max和Min组合使用

例如下面的代码是当屏幕的宽度在600px~900px之间才有效的：

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

这里的意思指的是设备的最大宽度，就是屏幕的宽度，像素，例如下面的代码:

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

知道这些有啥用？

我们了解了CSS3的Media Queries的使用方法，就可以简单的使用CSS来控制不同的浏览器甚至不同的设备（例如iPhone，iPad等）使用不同的CSS文件，或者不同的css代码。

在IE中使用CSS3的Media Queries

在IE家族中CSS3的Media Queries只用在IE8+的浏览器才得到支持，而中国国内份额最大的IE6、IE7是不支持的，不过我们可以通过下面推荐的三篇教程方法来解决这个问题。

1. CSS Tricks – using jQuery to detect browser size
2. The Man in Blue – using Javascript
3. jQuery的 Media Queries 插件

声明：文章未声明为原创文章，本文链接 http://js8.in/643.html. 转载请注明转自 JS8.IN ™