HTML5实践 -- CSS3 Media Queries
- - 博客园_首页 转载请注明原创地址： http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html. demo查看地址： http://www.webdesignerwall.com/demo/media-queries/. CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机.
HTML5实践 -- CSS3 Media Queries
标签：
html5
实践
css3
| 发表时间：2012-11-27 09:02 | 作者：下一站永远
出处：http://www.cnblogs.com/
转载请注明原创地址： 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;
}
}
.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;
}
}
.class {
background: #666;
}
}
多个 Media Queries
你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
.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;
}
}
.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">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
针对Internet Explorer的Media Queries
因为ie8以及之前版本的ie浏览器不支持media query，你需要使用JavaScript的hack计较解决问题。下面是一些解决方案：
示例站点
你可以使用支持media query的浏览器访问下面的站点，例如：Firefox, Chrome, 和 Safari。可以查看他们针对浏览器宽度所做的布局响应。
- 大尺寸: 3 列sidebar
- 小尺寸: 2 列sidebar (中间的sidebar跑到了左边)
- 更小尺寸: 1 列sidebar （最右边的跑到了logo下面）
- 最小尺寸: 没有sidebar (logo 和 右侧的sidebar 上移，其他sidebar 下移)
页面布局根据浏览器的可视区域，在1列、2列和4列之间切换。
大尺寸：导航在上不部, 1行图片
中等尺寸：导航在左边, 3列图片
小尺寸：导航在上部，logo没有背景图片, 3列图片
他和之前的Colly有点像，不同点在于它的图片会根据页面布局的变化，进行缩放。这里使用的技巧就是，对图片使用百分比宽度，代替固定宽度，例如：width=100%。
总结
我们需要注意到，针对mobile做了一个css，并不意味着我们的站点对mobile设备就是优化的。对mobile设备进行优化，网站图片和html代码同样需要缩小尺寸，这样才有益于加载。media query做到的只是设计展现，而不是优化操作。
原文地址： http://webdesignerwall.com/tutorials/css3-media-queries
相关 [html5 实践 css3] 推荐：
HTML5 & CSS3 研究文档
- Kings - 幸福收藏夹已经说了好久，一直没把这个文件夹分享出来. 这是我去年第四季度里做的，里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档，还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究，没有深入到应用中去. 不过，当做工具来使用，和入门文档，还是不错的. 特别是其中的 HTML5 JS API 文档.
HTML5 和 CSS3 书籍推荐
- - 我爱水煮鱼HTML5 和 CSS3 是下一代 Web 开发标准，无论是针对内容结构还是媒体，HTML5 都引进了各种新元素. 今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3，学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急. 现在网上已经有很多关于 HTML5 和 CSS3 的网站，包括介绍、教程以及使用技巧等等.
Adobe、标准和HTML5 -HTML5 and CSS3 开发
- - HTML5研究小组“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.
HTML5和CSS3：网页设计的框架
- 壮壮爱 - 译言-每日精品译文推荐来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设，网页上一些元素看起来和草稿中相对应元素不完全一样，客户端会发现那些字体定位上的细微的区别.
22个HTML5和CSS3表单教程
- 幻幽 or A書 - 伯乐在线 -博客 利用HTML5和CSS3，还有一些出色的说明文档，你可以做些有创造力的网页表单. 因此，本文整理综合了22个CSS3表单教程. 点击各个小标题下方图片，即可进入相应英文教程. 你可能对以下文章也感兴趣. 成为一个顶级设计师的8个秘诀 . 10个令人印象深刻的JavaScript动画效果网站.
23个优秀的HTML5/CSS3教程
- - 可咔酷 | 网络杂货铺HTML5/CSS3无疑是未来Web发展的方向，这一点在移动互联网领域已经得到了充分的证明. 如果你也是一名web开发者，想要深入了解关于HTML5和CSS3的话，你不妨看看下面这些教程. 这里有23个不错的HTML5/CSS3教程(有的使用了jQuery)，这些教程来自于国外的一些优秀的web开发者和设计师，相信看完之后你一定会学到不少东西.
30+免费优秀的HTML5+CSS3模板
- - Jackchen Design 1984HTML5和CSS3都是这两年来一直被热议的话题. 因为他们都有非常多的有趣的功能，他们会让您的网站不管是设计还是创意上都更加的时尚. 只是对于很多网页设计师来说最大的瓶颈还是浏览器之间兼容性的问题. 这似乎一直都是网页设计师心头的痛. 但在很多欧美国家，他们都敢于取舍，敢于创新和设计，甚至一些公司可以为了一些IDEA去放弃个别头疼的浏览器针对性的使用HTML5和CSS3来设计出想要的效果.
9个超酷的 HTML5/CSS3 应用
- - 氪星人1、HTML5播放器神话，卡带式古典播放器. 这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老，说它时尚，是因为现在的HTML5播放器很少有这种样式的，非常有创意. 如果你想给你的个人主要添加一款个性化的播放器，那么这款HTML5卡带式古典播放器可以选择一下，个人认为这是HTML5播放器的神话，非常经典.
最好的 HTML5/CSS3 演示（PPT）框架
- - CSDN博客Web前端推荐文章随着互联网与信息技术的发展，人际之间的资源分享、观点碰撞越来越频繁. PPT是一个很好的展示和交流的方式，但是在网络实时呈现方面，桌面端的PPT程序显得无能为力. 因此，基于web的内容展示应用需求激增，在此背景下，基于html5+css3的演示框架日渐流行. 今天，我们就来给大家推荐几个流行的项目.