CSS3 Media Query CSS3媒介查询 -

流浪鱼

浏览: 1684834 次
性别:
来自: 北京

最近访客更多访客>>

mlx09

luffy2341

kannan22

lesliehanhan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS3 Media Query CSS3媒介查询

博客分类：

通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表;max-width则反之

如下面代码：

<style>
			/* max-width 宽度小于 600px*/
			@media screen and (max-width:600px){
				.one{background:#F9C;}
				span.lt600{display:inline-block;}
			}
			/* min-width 宽度大于 900px*/
			@media screen and (min-width:900px){
				.two{background:#F90;}
				span.gt900{display:inline-block;}
			}
			/* min-width & max-width 宽度在 600px 到 900px 之间*/
			@media screen and (min-width:600px) and (max-width:900px){
				.three{background:#9CF;}
				span.bt600-900{display: inline-block;}
			}
			/* max device width 设备最大宽度为 480px*/
			@media screen and (max-device-width:480px){
				.iphone{background:#ccc;}
			}
</style>

有些时候，我们希望通过media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸。

代码如下：

@media screen and (max-device-width: 480px) {  
	.classForiPhoneDisplay {  
		font-size: 1.2em;  
	}  
} 

@media screen and (min-device-width: 768px) {  
	.minimumiPadWidth {  
		clear: both;  
		margin-bottom: 2px solid #ccc;  
	}  
}

iPhone4