【在设置媒体查询的时候,没有层级的观念，随意摆放，想要达成的效果不一 _响应式】

在设置媒体查询的时候,没有层级的观念，随意摆放，想要达成的效果不一

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

响应式

详细描述

截图

代码

@media (max-width: 768px) {
	.nav-1 {        
		width: 100%;
	}
	.contact  {
		width: 100%;
	}
	.picture span {
		margin-left: 8rem;
		font-size: 2rem;
	}
	.picture a {
		font-size: 5rem;
	}
	.picture p {
		font-size: 2.2rem;
		padding-left: 1rem;
	}
	.contact a {
		display: none;
	}
	.nav ul {
		margin-right: 0;
		margin-bottom: 0;
		width: max-content;
	}
	
	.piece {
		width: 100%;
		text-align: center;
	}
	.weap {
		width: 100%;
	}
	.top-method {
		position: relative;
	}
	.method img {
		margin-right: 1rem;
		position: absolute;
		right: 1rem;
		top: 1.2rem;
	}
	.method span {
		width: 100%;
	}
	.stud {
		height: 40rem;
		text-align: center;
	}
	.stud .blue {
		width: 27rem;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	.company img {
		height: initial;
		text-align: -webkit-center;
	}
	.company .logo {
		height: initial;
	}
	.fa {
		width: 100%;
	}
	.fa li {
		font-size: 1rem;
	}
	.fa span {
		width: 1.4rem;
	}
	.company .logo {
		width: 100%;
	}
	.fa li {
		width: 4rem;
	}
	.left-ending p {
		margin-bottom: 0;
	}
	.ending-1 {
		width: 100%;
		height: 30rem;
	}
	.centre-ending p {
		margin-bottom: 0;
	}
	.right-ending {
		text-align: -webkit-auto;
		margin-top: 1rem;
	}
	.look {
	width: 100%;
	height: 30rem;
	text-align: center;
}
.typeface {
    margin-top: 10rem;
}
.typeface ul {
	margin-top: 0;
}
.contact img {
	display: none;
}
.good{
	position: absolute;
	top: 30%;
}
}

编辑于2024-11-18