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 的区别是一样的。