HTML5实践 -- CSS3 Media Queries-阿里云开发者社区

HTML5实践 -- CSS3 Media Queries

2012-11-27 946

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html 　　demo查看地址：http://www.webdesignerwall.com/demo/media-queries/ 　　　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　demo查看地址：http://www.webdesignerwall.com/demo/media-queries/

　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不同的样式效果。下面的课程我们将会介绍到一些使用该技术的站点。

　　CSS3 Media Queries

　　打开我的demo页面，调整浏览器打大小，查看页面布局变化情况。

　　Max Width

　　当页面视图区域小于600px宽度的时候，css会被使用到。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

　　你也可以使用下面的方式，在页面的<head>中引用外部css文件。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

　　Min Width

　　当视图区域大于900px宽度的时候，css会被使用到。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

　　多个 Media Queries

　　你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

　　设备Width

　　下面的css会在 max-device-width为480px的时候使用，例如iphone。

　　note：max-device-width指的是设备实际分辨率，max-width指的是可是区域尺寸。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

　　针对 iPhone 4

　　下面的时针对iphone4的css。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

　　针对 iPad

　　你也可以在ipad上检查定位（portrait 或者 landscapse）。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">