媒体查询在两个不同页面上的页脚有两个不同的结果，即使代码相同？

Question

我刚刚完成了主页的媒体查询。我做了3个，一个最大宽度为1024px，一个最大宽度为724px，另一个最大为425px。我遇到的问题是724px显示器（平板电脑显示器）完成主页后，我开始将这些媒体查询复制到About页面，因为整个站点上的导航和页脚相同。但是“关于”页面上的页脚正在晃动-如此处所示：

下面的代码是主页，小提琴链接是“关于”页面。

https://jsfiddle.net/xqkweov4/3/

body, html {
	margin: 0;
	padding: 0;
}

/*---HEADER---*/

li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

header {
	background: blue;
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
}

li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	position: relative;
	top: 300px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: red;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.2s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---PROMISE---*/

.stats {
	width: 100%;
	display: flex;
	box-shadow: 0px 0px 150px grey;
	position: relative;
	z-index: 1;
	background-color: white;
}

.stats div {
	display: inline-block;
	flex-basis: 35%;
	text-align: center;
	padding-bottom: 30px;
}

.stat-info {
	font-size: 2rem;
	color: rgba(102,102,102, 1);
	font-family: 'Rajdhani';
	margin-bottom: 0;
	margin-top: 10px;
}

.stat-num {
	color: red;
	font-family: 'Rajdhani';
	font-size: 3rem;
	margin: 0;
	font-weight: bolder;
}

.stats div:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 35px;
	background-color: rgba(102,102,102, 0.60);
}

.promise {
	width: 100%;
	background: blue;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.promise .wrapper {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
	position: relative;
	top: 40px;
	color: white;
	font-family: 'Arvo';
	font-size: 3.5rem;
	text-align: center;
	margin-top: 0;
	word-spacing: 7px;
	text-shadow: 0px 0px 100px grey;
}

.promise p {
	color: white;
	font-size: 1.8rem;
	font-family: 'Rajdhani';
	margin-bottom: 0;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -171px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 100%;
}

.footer button {
	position: absolute;
	margin-left: 23.2%;
	margin-top: -40px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



@media screen and (max-width: 1024px) {
	
	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}

}



@media screen and (max-width: 768px) {

	/*---FOOTER---*/

	.contact .inner:after {
		margin-top: -195px;
	}

	.social .inner:after {
		left: 37.25%;
	}

	.footer button {
		margin-left: 20%;
	}
}



@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 40px;
		height: 5px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header {
		height: 50vh;
	}

	.phrase {
		top: 175px;
	}

	.phrase p {
		font-size: 1.7rem;
		margin-bottom: 10px;
	}

	.phrase a {
		font-size: 1.3rem;
		padding: 7px;
	}

	.phrase .fas {
		margin-top: 10px;
		font-size: 2.5rem;
	}

	.stats p {
		font-size: 1.3rem;
	}

	.stats div {
		padding-bottom: 10px;
	}

	.stats div:before {
		height: 20px;
	}

	.promise h1 {
		font-size: 2rem;
	}

	.promise p {
		position: relative;
		top: 10px;
		font-size: 1.3rem;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 90%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -9.5px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -43.75px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<div class="inner-wrap">
		<header>
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="about.html#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li class="after"><a href="#">Gallery</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</nav>
			
			<div class="phrase">
				<p>It all starts at the foundation.</p>
				<a>Get a Quote</a>
				<i class="fas fa-angle-down"></i>
			</div>	
		</header>

		<section class="stats">
			<div id="start-year">
				<p class="stat-info">Established</p><br>
				<p class="stat-num">2015</p>
			</div>

			<div id="projects">
				<p class="stat-info">Projects</p><br>
				<p class="stat-num">200+</p>
			</div>

			<div id="claims">
				<p class="stat-info">Insurance claims</p><br>
				<p class="stat-num">87%</p>
			</div>
		</section>

		<section class="promise">
			<div class="wrapper">
				<h1>Our Promise</h1>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
	</div>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1>Social</h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<p id="msg">Send some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1>Contact</h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

Answer 1

该问题似乎是由CSS差异引起的。在示例中，您在jsfiddle .footer .inner:before中提供的宽度为360px。在上面的代码中，同一伪元素的宽度为90％。不幸的是，仅解决此问题将无法解决问题，因为您似乎要将大量不同的CSS应用于相关页面。如果将媒体查询应用于具有不同CSS的页面，则不会总是获得相同的效果。对我来说，您的“关于”页面上的问题似乎不仅限于平板电脑。

通过在整个网站上使用一个样式表可以更好地为您服务，因此您无需每次都将内容复制到每个页面上。大多数网站只有一个主要样式表。

一个快速解决方案是添加以下CSS：

html,
body {
  overflow-x: hidden;
}

这只是隐藏了溢出问题，并没有真正解决根本问题，但是我不想深入探讨CSS，因为这是应该通过创建一些一致的页脚CSS来解决的问题。