码迷,mamicode.com
首页 > Web开发 > 详细

免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

时间:2014-08-01 19:51:42      阅读:197      评论:0      收藏:0      [点我收藏+]

标签: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,从现在开始。

bubuko.com,布布扣


免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询,布布扣,bubuko.com

免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

标签:html5   网页开发   实例   好玩的   

原文地址:http://blog.csdn.net/kgsew/article/details/38339317

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!