响应式布局之两种操作模式（六十二）

最新推荐文章于 2022-12-12 08:17:21 发布

每天进步一大步

最新推荐文章于 2022-12-12 08:17:21 发布

阅读量297

点赞数 1

分类专栏： HTML css3 CSS

本文链接：https://blog.csdn.net/weixin_44730244/article/details/116584855

版权

HTML 同时被 3 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

css3

30 篇文章 1 订阅

订阅专栏

直接在原基础上更改
自适应宽度：随着设备的增大，宽度也自适应的增加

/* 小设备 */
			.container{
				width: 100%;
				height: 1200px;
				padding-left: 15px;
				padding-right: 15px;
				margin: 0 auto;
				background-color:green;
			}
			
			/* 大设备 */
			@media all  and (min-width:768px){
				.container{
					max-width: 720px;
					background-color: black;
				}
			}
			@media   all  and (min-width:992px){
				.container{
					max-width: 960px;
					background-color: blue;
				}
			}
			@media all  and (min-width:1200px){
				.container{
					max-width: 1140px;
					background-color: red;
				}
			}

动态添加类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/* 普通添加 */
			.mt-5{
				margin-top: 10px;
			}
			/* 指定不同设备尺寸下，利用不同的类名更改 */
			@media all  and (min-width:768px){
				.mt-md-50{
					margin-top: 30px;
				}
			}
			@media   all  and (min-width:992px){
				.mt-lg-50{
					margin-top: 40px;
				}
			}
			@media all  and (min-width:1200px){
				.mt-xlg-50{
					margin-top: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div class="container mt-5 mt-md-50 mt-lg-50 mt-xlg-50">
			
		</div>
	</body>
</html>

实战：模仿小米官网导航菜单
小屏幕
在这里插入图片描述
大屏幕：

由于屏幕宽度和高度不同，侧边栏的大小和距离顶部的高度，以及距离右边的距离不一样。
模仿效果：
小屏幕

大屏幕：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			html,body{
				height: 100%;
			}
			main{
				width: 700px;
				height: 100%;
				margin: 0 auto;
				background-color: pink;
				position: relative;
			}
			aside{
				background-color: white;
				position: absolute;
				right:-27px;
				bottom: 40px;
			}
			aside li{
				text-align: center;
				line-height: 42px;
				height: 42px;
				width: 27px;
			}
			aside li::before{
				font-size: 20px;
				display: block;
			}
			@media all and (min-width:996px) {
				aside{
					position: fixed;
					right: 0;
				}
				aside li{
					width: 82px;
					height: 90px;
					
				}
				li:nth-child(1)::after{
					content:'联系方式' ;
					display: block;
				}
				li:nth-child(2)::after{
					content:'我的' ;
					display: block;
				}
				li:nth-child(3)::after{
					content:'设置' ;
					display: block;
				}
				li:nth-child(4)::after{
					content:'购物车' ;
					display: block;
				}
			}
			@media all and (max-height:700px){
				aside{
					bottom: 200px;
					
				}
			}
		</style>
	</head>
	<body>
		<main>
			<aside>
				<ul>
					<li class="iconfont icon-shouji"></li>
					<li class="iconfont icon-cebianlan-gerenzhongxin-weixuanzhong"></li>
					<li class="iconfont icon-shezhi"></li>
					<li class="iconfont icon-gouwuche"></li>
				</ul>
			</aside>
		</main>
	</body>
</html>

每天进步一大步

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局之两种操作模式（六十二）

直接在原基础上更改自适应宽度：随着设备的增大，宽度也自适应的增加/* 小设备 */ .container{ width: 100%; height: 1200px; padding-left: 15px; padding-right: 15px; margin: 0 auto; background-color:green; } /* 大设备 */ @media all and (min-width:768px){
复制链接

扫一扫