2

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


Lessong
101 声望4 粉丝