共计 1420 个字符，预计需要花费 4 分钟才能阅读完成。
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 的区别是一样的。