媒体查询不适用于Chrome，但适用于SO编辑器

Question

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

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

.wrapper2 {
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

header {
	background: blue;
	background-position: center;
	background-size: cover;
	height: 65vh;
	background-attachment: fixed;
}

header h1 {
	color: white;
	margin: 0;
	font-size: 5rem;
	font-family: 'Arvo';
}

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;
}

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

nav li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
	color: rgba(102,102,102,0.75);
}

nav 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;
}

/*---ABOUT---*/

.history h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.history h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.history p {
	color: rgba(102,102,102, 0.85);
	font-family: 'Rajdhani';
	font-size: 1.7rem;
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 35px;
	position: relative;
	top: -20px;
}

/*---SERVICES---*/

.services {
	background: blue;
	background-size: cover;
	background-attachment: fixed;
}

.services .wrapper {
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

.services {
	color: white;
	font-family: 'Arvo';
	font-size: 3rem;
}

.services .content {
	background-color: white;
	width: 100%;
}

.services h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
	position: relative;
	top: 20px;
}

.services h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.services h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.services .list {
	display: flex;
	padding-bottom: -40px;
}

.services ul {
	color: red;
	font-size: 2rem;
	display: inline-block;
	font-family: 'Rajdhani';
	list-style-type: square;
	margin-left: 80px;
	margin-top: 13px;
	flex-basis: 33.33%;
	margin-bottom: 0px;
}

.services p {
	margin: 0;
}

/*---TESTIMONY---*/

.testimony {
	background: blue;
	display: flex;
	justify-content: space-around;
	background-attachment: fixed;
}

.testimony h1 {
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;
	font-family: 'Arvo';
	padding: 30px;
	display: inline-block;
	flex-basis: 40%;
	margin-left: 30px;
}

.testimony span {
	color: white;
	font-size: 2.3rem;
}

.testimony .quote {
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	margin-left: 40px;
}

.testimony .left-quote {
	position: relative; 
	left: 50px; 
	top: 30px
}

.fa-quote-right {
	position: relative;
	right: 35px;
	top: 30px;
}

.testimony .move {
	right: 68px;
}

/*---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: 70px;
}

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

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

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

.contact .inner:after {
	content: '';
	width: 100px;
	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;
}

button {
	position: absolute;
	margin-left: 300px;
	margin-top: -50px;
	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: 425px) {

	/*---NAV---*/

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

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

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

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

	/*---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: -10px;
	}

	.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: 1.3rem;
		margin-bottom: 0;
		float: right;
		margin-right: 25.5%;
		position: relative;
		top: 15px;
	}

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

	.social i {
		font-size: 1.8rem;
		margin-right: 7px;
		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">
	<title>About | Kane Concrete & Construction</title>
	<link rel="stylesheet" href="../css/about.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>
	<header>
		<div class="wrapper2">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<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="#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>
			<h1>About Us</h1>
		</div>
	</header>

	<section class="history" style="background-color: white;">
		<h2>Our History</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur.</p>
	</section>

	<section class="services" id="services">
		<div class="wrapper">
			<h1>Services</h1>
		</div>

		<div class="content">
			<h2>Our skills</h2>

			<div class="list">
				<ul class="skills" style="position: relative; top: -45px;">
					<li><p style="color: rgba(102,102,102, 0.85);">Flatwork Concrete</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
				</ul>

				<ul class="skills">
					<li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
				</ul>

				<ul class="skills" style="position: relative; top: -45px;">
					<li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>
				</ul>
			</div>
		</div>
	</section>

	<section class="testimony">
		<span><i class="fas fa-quote-left left-quote"></i></span><h1>Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote">-Some Person</span></h1><span><i class="fas fa-quote-right move"></i></span>
		<span><i class="fas fa-quote-left left-quote"></i></span><h1>I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1><span><i class="fas fa-quote-right"></i></span>
	</section>

	<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">Give us some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" 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>

我正在为导航部分和页脚部分编写媒体查询。我从首页开始执行此操作，然后将媒体查询复制并粘贴到“关于”页面，因为它具有相同的导航和页脚，但在chrome浏览器中无法使用媒体查询。它仅适用于主页吗？此处发布的代码将显示其工作原理，但图片显示其在chrome浏览器中的外观。chrome

Answer 1

您是否忘记在head标签中添加以下内容？

<meta content="width=device-width, initial-scale=1" name="viewport" />