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

最新推荐文章于 2022-12-31 15:43:13 发布

原创最新推荐文章于 2022-12-31 15:43:13 发布 · 422 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文介绍如何使用媒体查询实现响应式网页设计，包括针对不同分辨率的浏览器和设备进行布局调整的方法。通过具体示例展示了根据不同屏幕尺寸改变CSS样式，使页面能够适应多种设备。

其实设备和浏览器的媒体查询写法大体相像，不同之处就是设备比浏览器的写法要多一个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%;
	}
}