欢迎光临
感受代码之美

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(推荐);
转载请注明来源:四个空格 » CSS3 @media用法总结

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址