CSS-@media详解。

CSS3@media查询

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

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

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

媒体类型还支持not和only关键字，它们可以用来更方便的定位某个媒体设备：

not:排除某种制定的媒体类型。
@media not print and(color){}
only:指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器；
@media only screen and(color){}

@media only screen and (max-width:500px){
    .gridmenu{
        width:100%;
    }
    .gridmain{
        width:100%;
    }
    .gridright{
        width:100%;
    }
}

@media的具体使用方式

1.最大宽度Max-Width:

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

上面代码表示：当屏幕小于600px时，将采用small.css样式来渲染Web页面。

2.最小宽度Min Width:

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

上面代码表示：当屏幕大于或等于600时，将采用large.css样式来渲染Web页面。

3.多个media使用：

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

上面的表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

max(min)-device-width和max(min)-width区别

max-device-width和max-width区别：

1.max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

2.max-width是目标显示区域的宽度，例如，浏览器宽度。

3.如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为‘PC设备’没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为显示区域即浏览器大小发生了变化。

4.如果使用max-device-width，那么当手机由竖变横时，CSS是执行的，因为显示区域发生了变化。

5.通常，面向移动设备用户使用max-device-width；面向PC设备用户使用max-width。

看看下面的写法：

/*移动设备*/
@media screen and (max-device-width:480px){
    /*CSS代码*/
}
/*PC*/
@media screen and(max-width:1024px){
    /*CSS代码*/
}

min-device-width和min-width的区别，跟max-device-width和max-width的区别是一样的。