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的区别是一样的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。