CSS3 @media用法总结

科学上网教程 | 机场推荐 | 云深不知处(机场)

CSS3中media媒体查询器用法总结:

媒体查询器语法：

@media mediatype and | not | only (media feature) { css-code; }

还有其他类型的使用方式，参见：Media Queries——媒体类型

接下来是使用媒体查询器(@media)的步骤:

1.首先是meta标签

在head中加入如下meta内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

以上代码的具体参数解释：

• width = device-width：宽度等于当前设备的宽度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2.基本示例

1）当屏幕尺寸等于960px时，加载指定样式

@media screen and (max-device-width:960px){
    body{background:red;}
}

2) 当屏幕尺寸大于960px时，加载指定样式

@media screen and (min-width:960px){ 
    body{background:orange;}
}

3) 当屏幕尺寸在960px和1200px之间时，加载指定样式

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

3.常见媒体类型

参考：

1. http://www.520ued.com/article/53882d7ab992a7c43f5c204b；
2. http://www.jianshu.com/p/b8f375b52a61；
3. http://bbs.blueidea.com/thread-2828567-1-1.html；
4. http://www.jianshu.com/p/0979025df112(推荐)；