当浏览器的宽度小于600px,布局发生变化.(电魂前端笔试)

最新推荐文章于 2022-09-05 09:32:32 发布

墨名-棋妙

最新推荐文章于 2022-09-05 09:32:32 发布

阅读量1.1k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u011689113/article/details/40318409

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当浏览器打开的时候默认的布局是图一,当浏览器的宽度小于600px的时候布局如图二.

(图一)

(图二)

当时没有写出来,后来网上查了一下,主要使用@media screen 做的.当时找的一个 demo,然后看了一下他的源代码,自己写出来的代码如下:

<html>
<head>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.div1 {
	background-color: green;
	padding: 0;
	margin: 0;
	width: 30%;
	height:100%;
	float: left;
}

.div2{
	background-color: blue;
	padding: 0;
	margin: 0;
	width: 70%;
	height:50%;
	float: left;
}

.div3{
	background-color: red;	
	padding: 0;
	margin: 0;
	width: 70%;
	height:50%;
	float: left;
}

@media screen and (max-width: 600px) {
	.div1later {
		width: 100%;
		height: 33.3%;
		background-color: white;
	}
	.div2later {
		width: 100%;
		height: 33.3%;
	}
	.div3later {
		width: 100%;
		height: 33.3%;
	}
}

</style>
</head>

<body>
	<div class="div1 div1later">div1</div>
	<div class="div2 div2later">div2</div>
	<div class="div3 div3later">div3</div>
</body>
</html>