利用媒体查询简单实现设备和浏览器不同像素展示的效果

其实设备和浏览器的媒体查询写法大体相像，不同之处就是设备比浏览器的写法要多一个device，而且要注意的是对于初次使用媒体查询的小伙伴，一定要规范写法，and两边一定要空一格。

• 浏览器上的媒体查询效果

1.浏览器像素在1000px~以上

2.浏览器像素值在600~999

3.浏览器像素值在100~599

HTML:

<div id="wrapper">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS:

#wrapper{
	width: 100%;
	height: 500px;
}
#wrapper>div{
	float: left;
	height: 200px;
}
#wrapper>div:nth-child(1){
	background: #0000FF;
}
#wrapper>div:nth-child(2){
	background: #2D93CA;
}
#wrapper>div:nth-child(3){
	background: #00FF00;
}
/* 1行显示3个div */
@media screen and (min-width:1000px){
	#wrapper>div{
		width: 33%;
	}
}
/* 1行显示2个div */
@media screen and (min-width:600px) and (max-width:999px)  {
	#wrapper>div{
		width: 50%;
	}
}
/* 1行显示1个div */
@media screen and (min-width:100px) and (max-width:599px)  {
	#wrapper>div{
		width: 100%;
	}
}

• 浏览器上的媒体查询效果
  1.设备像素在600px~以上
  

2.设备像素在300px~599

3.设备像素在100px~299

HTML:

<div id="wrapper">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS:

#wrapper{
	width: 100%;
	height: 500px;
}
#wrapper>div{
	float: left;
	height: 200px;
}

#wrapper>div:nth-child(1){
	background: #0000FF;
}
#wrapper>div:nth-child(2){
	background: #2D93CA;
}
#wrapper>div:nth-child(3){
	background: #00FF00;
}

/* 1行显示3个div */
@media screen and (min-device-width:600px){
	#wrapper>div{
		width: 33%;
	}
}
/* 1行显示2个div */
@media screen and (min-device-width:300px) and (max-device-width:599px)  {
	#wrapper>div{
		width: 50%;
	}
}
/* 1行显示1个div */
@media screen and (min-device-width:100px) and (max-device-width:299px)  {
	#wrapper>div{
		width: 100%;
	}
}