用CSS3 @media(媒体) 查询实现网站响应式布局

前端响应式布局需要用到CSS3 @media 查询，接下来我将介绍媒体查询怎么使用。

CSS3 @media 查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS3 @media 查询实例

当浏览器宽度最大为400px时，改变body的背景颜色为红色

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

body { background-color:red;}

}

当浏览器宽度在300px到400px时，改变body的背景为红色

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

    body {background-color:red;}

}

在手机端我们一般是这样写：

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

    body {background-color:red;}

}

那么问题来了，max-width和max-device-width有什么区别？

device-width 定义输出设备的屏幕可见宽度。

max-width 定义输出设备中的页面最大可见区域宽度。

height也是这样对应。

针对不同的媒体使用不同的样式文件

上面的实例是在一个css文件里面根据不同的宽带来调用不同的样式，我们也可以根据不同的宽度来引入不同的css文件，我推荐下面的这种方式。

<!-- 宽度大于 1000px 的屏幕使用该样式 -->

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

<!-- 宽度小于或等于 500px 的屏幕使用该样式 -->

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

....

到这里CSS3 @media 查询的一些基本用法已经介绍完了，如果还是有不懂的，可以上w3cschool或者菜鸟教程查看更详细的教程。