如何使用css语句实现窗口布局的响应变换

最新推荐文章于 2022-07-12 00:57:00 发布

國榮张

最新推荐文章于 2022-07-12 00:57:00 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/qq_43686288/article/details/103002590

版权

@如何实现国字型和工字型窗口的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8  name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maxmun-scale=1,user-scalable=no" >
		<title>响应式下的布局应用——工变口</title>
		<link href="../css/base.css" rel="stylesheet">
		<style type="text/css">
			.warp_panel{
				height:100%;
				width:100%;
				background-color:#000000;
				display:flex;
				flex-flow: column;
				justify-concent:center;
				align-items:center;
				
			}
			.warp_panel>div:nth-of-type(1){
				height:10%;
				width:100%;
				background-color:red;
			}
			.warp_panel>div:nth-of-type(2){
				height:80%;
				width:80%;
				background-color:yellow;
			}
			.warp_panel>div:nth-of-type(3){
				height:10%;
				width:100%;
				background-color:pink;
			}
			@media screen and (max-width:800px) and (min-width:500px){
			     .warp_panel{
					 justify-content:center;
					 }
				.warp_panel>div:nth-of-type(1){
					display:none;
				}
				.warp_panel>div:nth-of-type(3){
					display:none;
				}
				}
				@media screen and (max-width:500px){
					.warp_panel>div:nth-of-type(1){
						display:none;
					}
					.warp_panel>div:nth-of-type(2){
						display:none;
					}
					
					.warp_panel>div:nth-of-type(3){
						display:none;
					}
					
				}
				
		</style>
	</head>
	<body>
		<div class="warp_panel">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

國榮张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用css语句实现窗口布局的响应变换

@如何实现国字型和工字型窗口的转换<!DOCTYPE html><html> <head> <meta charset="utf-8 name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maxmun-scale=1,user-scalable=no...
复制链接

扫一扫