自适应布局页面写一个练习

最新推荐文章于 2023-11-03 20:20:04 发布

芒果一只有毒的

最新推荐文章于 2023-11-03 20:20:04 发布

阅读量463

点赞数

分类专栏： html 文章标签：前端布局

本文链接：https://blog.csdn.net/weixin_42137359/article/details/83896231

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

自适应布局页面

创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术为不同分辨率定义布局。

我打算定义三个div，在窗口大小不同的时候显示不同。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" http-equiv="Content-Type">
	<title>自适应布局</title>
<style type="text/css">
	*{margin: 0; padding: 0;}
	#contain{
		width: 1100px;
		margin: auto;
		padding: 50px;
	}
	#left{
		width: 200px;
		height: 500px;
		float: left;
		background: red;
		margin-right: 80px;
	}
	#right{
		width: 200px;
		height: 500px;
		float: right;
		background: green;
	}
	#middle{
		width: 520px;
		height: 500px;
		float: left;
		background: blue;
	}
	}
	</style>
</head>
<body>
<div id="contain">
	<div id="left">left</div>
	<div id="middle">middle</div>
	<div id="right">right</div>
</div>
</body>
</html>

这个是窗口width大于1000时候这样显示的。

@media screen and (min-width: 640px) and (max-width: 999px){
		*{margin: 0; padding: 0;}
	#contain{
		width: 100%;
		margin: auto;	
	}
	#left{
		width: 20%;
		height: 500px;
		float: left;
		background: red;
	}
	#right{
		margin-top: 40px;
		width: 100%;
		height: 200px;
		float: right;
		background: green;
	}
	#middle{
		width: 60%;
		height: 500px;
		float: right;
		background: blue;
	}
	}

这个是当屏幕分辨率为640-999px时显示的

@media screen and (max-width: 639px){
		*{margin: 0; padding: 0;}
		#contain{
			width: 100%;
			margin: auto;
			padding: 50px;
		}
		#left{
			width: 100%;
			height: 200px;
			background: red;
			margin-right: ;
		}
		#right{
			width: 100%;
			height: 200px;
			background: green;
		}
		#middle{
			width: 100%;
			height: 200px;
			background: blue;
	}
	}

这个是屏幕分辨率小于640px时css样式

下面的是全部的代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" http-equiv="Content-Type">
	<title>自适应布局</title>
<style type="text/css">
	*{margin: 0; padding: 0;}
	#contain{
		width: 1100px;
		margin: auto;
		padding: 50px;
	}
	#left{
		width: 200px;
		height: 500px;
		float: left;
		background: red;
		margin-right: 80px;
	}
	#right{
		width: 200px;
		height: 500px;
		float: right;
		background: green;
	}
	#middle{
		width: 520px;
		height: 500px;
		float: left;
		background: blue;
	}
	@media screen and (min-width: 640px) and (max-width: 999px){
		*{margin: 0; padding: 0;}
	#contain{
		width: 100%;
		margin: auto;	
	}
	#left{
		width: 20%;
		height: 500px;
		float: left;
		background: red;
	}
	#right{
		margin-top: 40px;
		width: 100%;
		height: 200px;
		float: right;
		background: green;
	}
	#middle{
		width: 60%;
		height: 500px;
		float: right;
		background: blue;
	}
	}
	@media screen and (max-width: 639px){
		*{margin: 0; padding: 0;}
		#contain{
			width: 100%;
			margin: auto;
			padding: 50px;
		}
		#left{
			width: 100%;
			height: 200px;
			background: red;
			margin-right: ;
		}
		#right{
			width: 100%;
			height: 200px;
			background: green;
		}
		#middle{
			width: 100%;
			height: 200px;
			background: blue;
	}
	}
</style>
</head>
<body>
<div id="contain">
	<div id="left">left</div>
	<div id="middle">middle</div>
	<div id="right">right</div>
</div>
</body>
</html>

这是浏览器显示的三个div在不同窗口大小时显示的状态

在这里插入图片描述

芒果一只有毒的

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应布局页面写一个练习

自适应布局页面创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术为不同分辨率定义布局。我打算定义三个div，在窗口大小不同的时候显示不同。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" http-equiv="Content-Type"&gt; &lt;ti
复制链接

扫一扫

专栏目录