免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询。如果只是简单的设计一个流式布局系统，那么可以保证每个网格按比例的放大和缩小，但有可能会使得在小屏幕下（如手机设备）网格太小而严重影响阅读，这样的设计称不上响应式设计。媒体查询可以来解决这一问题。媒体查询可以为特定的浏览器和设备提供特定的样式。媒体查询是CSS 3的一个新特性，是对媒体类型的扩展。
提示：W3C列出了10种媒体类型，请参考http://www.w3.org/TR/CSS2/media.html#media-types。
在响应式设计中，媒体查询一般在CSS中定义，如最常见的使用方式设置屏幕宽度小于1024px时的样式，代码如下：
@media screen and (max-width: 1024px){
// 在这时设置小于1024px时的样式
}
设置屏幕宽度小于600px时的样式，代码如下：
@media screen and (max-width: 600px){
// 在这时设置小于600px时的样式
}
设置屏幕宽度在600px~900px之间时的样式，代码如下：
@media screen and (max-width: 600px) and(min-width: 900px){
// 设置样式
}
设置设备的实际分辨率小于480px时的样式（如iPhone），代码如下：
@media screen and (max-device-width: 480px){
// iPhone手机样式在这里设置
}
设置iPad或iPhone在横向时的样式，代码如下：
@media screen and (orientation:landscape){
// 在这时设置样式
}
提示：更多关于媒体查询请参考http://www.w3.org/TR/css3-mediaqueries/。
学习HTML5最好的书就是《HTML5网页开发实例详解》，用代码学习用案例学习，可比看文字有趣多了！！！一本书搞定HTML5，从现在开始。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
