如何为2个媒体查询使用2种不同的样式，而两者的最大宽度相同但1种具有最大高度

时间：2019-03-09 02:37:21

标签： html css

嗨，我正在设置媒体查询，最大宽度为715px。我只想更改标题的背景位置，因为背景图片未居中。所以我将其background-position: -300px;移开了，但是现在例如当我切换到银河S5时，屏幕宽度为640px，因此它将捕获715px查询中的样式，但是高度为360px，因此图像偏离屏幕一半。我以为可以使用

来解决此问题 
`@media screen and (max-width: 640px) , screen and (max-height: 360px) { 
  header { 
    background-position: 0px;
  }
 }`

，然后将图像位置设置为具有该宽度加高度的正常位置，但这不起作用吗？有什么想法吗？

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

/*---HEADER---*/

header {
	background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 65vh;
}

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

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

/*---NAV---*/

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

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

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

/*---FORM---*/

form {
	border: 1px solid black;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	background-color: rgba(102, 102, 102, 0.15);
	border-radius: 5px;
}

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

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

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

.form .row {
	margin: 20px;
	display: flex;
}

label {
	color: black;
}

label, input {
	font-size: 1.3rem;
	font-family: 'Rajdhani';
}

.label {
	background-color: rgba(102, 102, 102, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
}

.middle {
	margin-left: 15px;
	margin-right: 15px;
}

.row-1 input, .row-3 input {
	flex-basis: 33.33%;
}

.row-2 input {
	width: 100%;
}

.row-4 {
	justify-content: space-between;
}

.row-4 input, .row-4 .label {
	flex-basis: 24%;
}

.row-5  {
	flex-direction: column;
}

.radio {
	margin-top: 10px;
}

.row-6 {
	justify-content: space-between;
}

.row-6 input, .row-6 .label {
	flex-basis: 24%;
}

.row-7 {
	justify-content: space-between;
}

.row-7 .col {
	flex-basis: 50%;
}

.row-8 {
	justify-content: space-between;
}

.row-8 .col {
	flex-basis: 50%;
}

.crime-textarea {
	margin-top: 10px;
	display: none;
	resize: none;
}

#crime-yes:checked ~ textarea {
	display: block;
}

.row-9 {
	justify-content: space-between;
}

.row-9 .label {
	flex-basis: 24%;
}

.row-9 input {
	margin-left: 15px;
	flex-grow: 1;
}

.row-10 {
	justify-content: space-between;
}

.row-10 input, .row-10 .label {
	flex-basis: 24%;
}

.row-11 {
	justify-content: space-between;
}

.row-11 input, .row-11 .label {
	flex-basis: 24%;
}

.row-12 {
	justify-content: space-between;
}

.row-12 input, .row-12 .label {
	flex-basis: 24%;
}

.row-13  {
	justify-content: space-between;
}

.row-13 input, .row-13 .label {
	flex-basis: 24%;
}

h3 {
	font-family: 'Rajdhani';
	text-align: center;
}

/*---TABLE---*/

table {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border-spacing: 15px;
}

thead tr {
	background-color: rgba(102, 102, 102, 0.3);
	color: black;
}

thead th {
	font-size: 1.3rem;
	font-family: 'Rajdhani'; 
}

th td {
	margin-right: 10px;
	margin-left: 10px;
}

tbody input {
	width: 100%;
}

#submit {
	background-color: red;
	border: none;
	color: white;
	outline: none;
	font-size: 1.5rem;
	padding: 7px;
	width: 35%;
	align-self: center;
	border-radius: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	margin-bottom: 20px;
	display: block;
	transition: all 0.3s ease;
}

#submit:hover {
	cursor: pointer;
	background-color: #cc0000;
}

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

.footer h1 span {
    display: inline;
    position: relative;
}

.footer h1 span:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: red;
	position: absolute;
  	bottom: 0;
	left: 0;
}

.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: 89%;
}

.footer button {
	float: right;
	margin-right: 9.5%;
	margin-top: -17px;
	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-------*/



/*---LAPTOP-LARGE---*/

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

	/*---FOOTER---*/

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

}


/*---TABLET-LARGE---*/

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

	/*---NAV---*/

	.logo {
		font-size: 5rem;
	}

	nav li {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header {
		background-position: -700px;
	}

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-right: 10.25%;
	}
}

@media screen and (max-width: 823px) {
	
	/*---MAIN---*/

	header, .careers-wrapper {
		height: 65vh;
	}

	.label {
		font-size: 1rem;
		padding: 0;
	}
}

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

	/*---NAV---*/

	nav li {
		font-size: 1.7rem;
	}

	.logo {
		font-size: 2.7rem;
	}

	/*---MAIN---*/

	header, .careers-wrapper {
		height: 100vh;
	}

	label {
		font-size: 1rem;
	}

	/*---FOOTER---*/

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

	.contact .inner {
		margin-right: 20px;
	}

}

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

	/*---NAV---*/

	nav li {
		font-size: 1.6rem;
	}

	.logo {
		font-size: 3rem;
	}

	/*---MAIN---*/

	header {
		background-position: -600px;
	}

	header, .careers-wrapper {
		height: 65vh;
	}

	.row-1 input, .row-2 input, .row-3 input {
		font-size: 1.2rem;
	}

	/*---FOOTER---*/

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

}

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

	/*---MAIN---*/

	header {
		background-position: 0px;
	}

	/*---FOOTER---*/

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

	.contact .inner p {
		margin: 5px;
	}

}

/*------LANDSCAPE-MODE-MOBILE------*/

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

	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header, .careers-wrapper {
		height: 100vh;
	}

	header {
		background-position: -300px;
	}

	form {
		margin-left: 10px;
		margin-right: 10px;
	}

	.row {
		flex-direction: column;
	}

	.middle {
		margin: 0;
	}

	.row-1 input, .row-3 input {
		margin-top: 5px;
		margin-bottom: 5px; 
	}

	.row-4 input, .row-6 input {
		margin-bottom: 7px;
	}

	.row-9 input {
		margin-left: 0;
	}

	#submit {
		width: 90%;
	}

	/*---FOOTER---*/
	
	.links a {
		font-size: 1.1rem;
		top: -13px;
	}

	.contact .inner {
		margin-right: 15px;
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -5px;
		width: 90.5%;
	}

	.footer button {
		margin-top: -18px;
		margin-right: 7%;
		font-size: 1.1rem;
	}

}

@media screen and (max-width: 640px) , screen and (max-height: 360px) {
	header {
		background-position: 0px;
	}
}

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

	/*---MAIN---*/

	header h1 {
		font-size: 3.5rem;
	}

	

	/*---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: 100vw;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 1px;
	  left: 0;
	}

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

	.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-top: 25px;
		margin-left: 5px;
	}

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

	.copyright {
		background-color: red;
		padding-top: 10px;
		padding-bottom: 10px;
	}

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

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Careers | Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/careers.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="careers-wrapper">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1" id="m1"></div>
						<div class="m2" id="m2"></div>
						<div class="m3" id="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><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>

			<h1>Join Our Team</h1>
		</div>	
	</header>

	<section class="form">
	<h2>We're Hiring</h2>

		<form action="" method="" id="form">
			<h3>General Information</h3>
			<div class="row row-1">
				<input type="text" name="First" placeholder="First Name">
				<input type="text" name="Last" placeholder="Last Name" class="middle">
				<input type="text" name="SSN" placeholder="SSN">
			</div>

			<div class="row row-2">
				<input type="text" name="Address" placeholder="Address">
			</div>
			
			<div class="row row-3">
				<input type="text" name="City" placeholder="City">
				<input type="text" name="State" placeholder="State" class="middle">
				<input type="text" name="Zipcode" placeholder="Zipcode">
			</div>

			<div class="row row-4">
				<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
				<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
				<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
				<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
			</div>

			<div class="row row-5">
				<label>Are you 18 years old or older?</label>
				<div class="radio">
					<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
					<label for="ageYearsYes">Yes</label>
					<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
					<label for="ageYearsNo">No</label>
				</div>
			</div>

			<div class="row row-6">
				<div class="label"><label>Desired Wage:</label></div>
				<input type="text" id="wage-desired">
				<div class="label"><label>Available Start Date:</label></div>
				<input type="text" id="start-date">
			</div>

			<div class="row row-7">
				<div class="col">
					<label>Are you legally authorized to work in the U.S?</label>
					<div class="radio">
						<input type="radio" name="legally" value="Yes" id="legally-yes">
						<label for="legally-yes">Yes</label>
						<input type="radio" name="legally" value="No" required="" id="legally-no">
						<label for="legally-no">No</label>
					</div>
				</div>

				<div class="col">
					<label>Are you willing to submit to a drug test?</label>
					<div class="radio">
						<input type="radio" name="drug-test" value="Yes" id="drug-yes">
						<label for="drug-yes">Yes</label>
						<input type="radio" name="drug-test" value="No" required="" id="drug-no">
						<label for="drug-no">No</label>
					</div>
				</div>
			</div>

			<div class="row row-8">
				<div class="col">
					<label>Have you ever been convicted of a crime? If yes, please explain.</label>
					<div class="radio">
						<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
						<label for="crime-yes" id="crime-yes">Yes</label>
						<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
						<label for="crime-no">No</label>
						<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
					</div>
				</div>

				<div class="col">
					<label class="">How did you hear about this job?</label>
					<div class="radio">
						<input type="radio" name="friend" value="friend" id="friend">
						<label for="friend">friend</label>
						<input type="radio" name="friend" value="online" id="online">
						<label for="friend">online</label>
						<input type="radio" name="friend" value="other" id="other">
						<label for="other">other</label>
					</div>
				</div>
			</div>

			<hr>
			<h3>Employment History</h3>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<h3>Refrences</h3>

			<div class="table-wrap">
				<table>
					<thead>
						<tr>
							<th>NAME</th>
							<th>RELATIONSHIP</th>
							<th>COMPANY</th>
							<th>PHONE NUMBER</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<input type="submit" value="Submit" id="submit">
		</form>
	</section>

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

					<a href="index.html">Home</a>
					<a href="about.html">About</a>
					<a href="about.html#services">Services</a>
					<a href="careers.html">Careers</a>
					<a href="contact.html">Contact</a>
					<a href="contact.html#quote">Quote</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1><span>Social</span></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>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1><span>Contact</span></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>
	<script src="../script.js"></script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

使用此CSS添加两个媒体查询

@media screen and (max-width: 640px) and (min-height: 320px) {
    header {
        background-position: 0px;
    }
}


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

/*---HEADER---*/

header {
	background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 65vh;
}

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

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

/*---NAV---*/

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

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

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

/*---FORM---*/

form {
	border: 1px solid black;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	background-color: rgba(102, 102, 102, 0.15);
	border-radius: 5px;
}

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

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

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

.form .row {
	margin: 20px;
	display: flex;
}

label {
	color: black;
}

label, input {
	font-size: 1.3rem;
	font-family: 'Rajdhani';
}

.label {
	background-color: rgba(102, 102, 102, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
}

.middle {
	margin-left: 15px;
	margin-right: 15px;
}

.row-1 input, .row-3 input {
	flex-basis: 33.33%;
}

.row-2 input {
	width: 100%;
}

.row-4 {
	justify-content: space-between;
}

.row-4 input, .row-4 .label {
	flex-basis: 24%;
}

.row-5  {
	flex-direction: column;
}

.radio {
	margin-top: 10px;
}

.row-6 {
	justify-content: space-between;
}

.row-6 input, .row-6 .label {
	flex-basis: 24%;
}

.row-7 {
	justify-content: space-between;
}

.row-7 .col {
	flex-basis: 50%;
}

.row-8 {
	justify-content: space-between;
}

.row-8 .col {
	flex-basis: 50%;
}

.crime-textarea {
	margin-top: 10px;
	display: none;
	resize: none;
}

#crime-yes:checked ~ textarea {
	display: block;
}

.row-9 {
	justify-content: space-between;
}

.row-9 .label {
	flex-basis: 24%;
}

.row-9 input {
	margin-left: 15px;
	flex-grow: 1;
}

.row-10 {
	justify-content: space-between;
}

.row-10 input, .row-10 .label {
	flex-basis: 24%;
}

.row-11 {
	justify-content: space-between;
}

.row-11 input, .row-11 .label {
	flex-basis: 24%;
}

.row-12 {
	justify-content: space-between;
}

.row-12 input, .row-12 .label {
	flex-basis: 24%;
}

.row-13  {
	justify-content: space-between;
}

.row-13 input, .row-13 .label {
	flex-basis: 24%;
}

h3 {
	font-family: 'Rajdhani';
	text-align: center;
}

/*---TABLE---*/

table {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border-spacing: 15px;
}

thead tr {
	background-color: rgba(102, 102, 102, 0.3);
	color: black;
}

thead th {
	font-size: 1.3rem;
	font-family: 'Rajdhani'; 
}

th td {
	margin-right: 10px;
	margin-left: 10px;
}

tbody input {
	width: 100%;
}

#submit {
	background-color: red;
	border: none;
	color: white;
	outline: none;
	font-size: 1.5rem;
	padding: 7px;
	width: 35%;
	align-self: center;
	border-radius: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	margin-bottom: 20px;
	display: block;
	transition: all 0.3s ease;
}

#submit:hover {
	cursor: pointer;
	background-color: #cc0000;
}

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

.footer h1 span {
    display: inline;
    position: relative;
}

.footer h1 span:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: red;
	position: absolute;
  	bottom: 0;
	left: 0;
}

.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: 89%;
}

.footer button {
	float: right;
	margin-right: 9.5%;
	margin-top: -17px;
	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-------*/



/*---LAPTOP-LARGE---*/

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

	/*---FOOTER---*/

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

}


/*---TABLET-LARGE---*/

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

	/*---NAV---*/

	.logo {
		font-size: 5rem;
	}

	nav li {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header {
		background-position: -700px;
	}

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-right: 10.25%;
	}
}

@media screen and (max-width: 823px) {
	
	/*---MAIN---*/

	header, .careers-wrapper {
		height: 65vh;
	}

	.label {
		font-size: 1rem;
		padding: 0;
	}
}

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

	/*---NAV---*/

	nav li {
		font-size: 1.7rem;
	}

	.logo {
		font-size: 2.7rem;
	}

	/*---MAIN---*/

	header, .careers-wrapper {
		height: 100vh;
	}

	label {
		font-size: 1rem;
	}

	/*---FOOTER---*/

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

	.contact .inner {
		margin-right: 20px;
	}

}

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

	/*---NAV---*/

	nav li {
		font-size: 1.6rem;
	}

	.logo {
		font-size: 3rem;
	}

	/*---MAIN---*/

	header {
		background-position: -600px;
	}

	header, .careers-wrapper {
		height: 65vh;
	}

	.row-1 input, .row-2 input, .row-3 input {
		font-size: 1.2rem;
	}

	/*---FOOTER---*/

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

}

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

	/*---MAIN---*/

	header {
		background-position: 0px;
	}

	/*---FOOTER---*/

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

	.contact .inner p {
		margin: 5px;
	}

}

/*------LANDSCAPE-MODE-MOBILE------*/

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

	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header, .careers-wrapper {
		height: 100vh;
	}

	header {
		background-position: -300px;
	}

	form {
		margin-left: 10px;
		margin-right: 10px;
	}

	.row {
		flex-direction: column;
	}

	.middle {
		margin: 0;
	}

	.row-1 input, .row-3 input {
		margin-top: 5px;
		margin-bottom: 5px; 
	}

	.row-4 input, .row-6 input {
		margin-bottom: 7px;
	}

	.row-9 input {
		margin-left: 0;
	}

	#submit {
		width: 90%;
	}

	/*---FOOTER---*/
	
	.links a {
		font-size: 1.1rem;
		top: -13px;
	}

	.contact .inner {
		margin-right: 15px;
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -5px;
		width: 90.5%;
	}

	.footer button {
		margin-top: -18px;
		margin-right: 7%;
		font-size: 1.1rem;
	}

}

@media screen and (max-width: 640px) and (min-height: 320px) {
	header {
		background-position: 0px;
	}
}

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

	/*---MAIN---*/

	header h1 {
		font-size: 3.5rem;
	}

	

	/*---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: 100vw;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 1px;
	  left: 0;
	}

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

	.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-top: 25px;
		margin-left: 5px;
	}

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

	.copyright {
		background-color: red;
		padding-top: 10px;
		padding-bottom: 10px;
	}

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

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Careers | Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/careers.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="careers-wrapper">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1" id="m1"></div>
						<div class="m2" id="m2"></div>
						<div class="m3" id="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><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>

			<h1>Join Our Team</h1>
		</div>	
	</header>

	<section class="form">
	<h2>We're Hiring</h2>

		<form action="" method="" id="form">
			<h3>General Information</h3>
			<div class="row row-1">
				<input type="text" name="First" placeholder="First Name">
				<input type="text" name="Last" placeholder="Last Name" class="middle">
				<input type="text" name="SSN" placeholder="SSN">
			</div>

			<div class="row row-2">
				<input type="text" name="Address" placeholder="Address">
			</div>
			
			<div class="row row-3">
				<input type="text" name="City" placeholder="City">
				<input type="text" name="State" placeholder="State" class="middle">
				<input type="text" name="Zipcode" placeholder="Zipcode">
			</div>

			<div class="row row-4">
				<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
				<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
				<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
				<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
			</div>

			<div class="row row-5">
				<label>Are you 18 years old or older?</label>
				<div class="radio">
					<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
					<label for="ageYearsYes">Yes</label>
					<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
					<label for="ageYearsNo">No</label>
				</div>
			</div>

			<div class="row row-6">
				<div class="label"><label>Desired Wage:</label></div>
				<input type="text" id="wage-desired">
				<div class="label"><label>Available Start Date:</label></div>
				<input type="text" id="start-date">
			</div>

			<div class="row row-7">
				<div class="col">
					<label>Are you legally authorized to work in the U.S?</label>
					<div class="radio">
						<input type="radio" name="legally" value="Yes" id="legally-yes">
						<label for="legally-yes">Yes</label>
						<input type="radio" name="legally" value="No" required="" id="legally-no">
						<label for="legally-no">No</label>
					</div>
				</div>

				<div class="col">
					<label>Are you willing to submit to a drug test?</label>
					<div class="radio">
						<input type="radio" name="drug-test" value="Yes" id="drug-yes">
						<label for="drug-yes">Yes</label>
						<input type="radio" name="drug-test" value="No" required="" id="drug-no">
						<label for="drug-no">No</label>
					</div>
				</div>
			</div>

			<div class="row row-8">
				<div class="col">
					<label>Have you ever been convicted of a crime? If yes, please explain.</label>
					<div class="radio">
						<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
						<label for="crime-yes" id="crime-yes">Yes</label>
						<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
						<label for="crime-no">No</label>
						<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
					</div>
				</div>

				<div class="col">
					<label class="">How did you hear about this job?</label>
					<div class="radio">
						<input type="radio" name="friend" value="friend" id="friend">
						<label for="friend">friend</label>
						<input type="radio" name="friend" value="online" id="online">
						<label for="friend">online</label>
						<input type="radio" name="friend" value="other" id="other">
						<label for="other">other</label>
					</div>
				</div>
			</div>

			<hr>
			<h3>Employment History</h3>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<div class="row row-9">
				<div class="label"><label for="employer">Current/Recent Employer:</label></div>
				<input type="text" name="employer">
			</div>

			<div class="row row-10">
				<div class="label"><label for="employer-phone">Phone #</label></div>
				<input type="text" name="employer-phone">
				<div class="label"><label for="employer-address">Address:</label></div>
				<input type="text" name="employer-address">
			</div>

			<div class="row row-11">
				<div class="label"><label for="hire-date">Hired Date:</label></div>
				<input type="text" name="hire-date">
				<div class="label"><label for="end-date">End Date:</label></div>
				<input type="text" name="end-date">
			</div>

			<div class="row row-12">
				<div class="label"><label for="job-title">Job Title:</label></div>
				<input type="text" name="job-title">
				<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
				<input type="text" name="job-responsibilities">
			</div>

			<div class="row row-13">
				<div class="label"><label for="wage-rate">Wage Rate:</label></div>
				<input type="text" name="wage-rate">
				<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
				<input type="text" name="reason-left">
			</div>

			<hr>

			<h3>Refrences</h3>

			<div class="table-wrap">
				<table>
					<thead>
						<tr>
							<th>NAME</th>
							<th>RELATIONSHIP</th>
							<th>COMPANY</th>
							<th>PHONE NUMBER</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
							</td>
							<td>
								<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
							</td>
							<td>
								<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
							</td>
							<td>
								<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<input type="submit" value="Submit" id="submit">
		</form>
	</section>

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

					<a href="index.html">Home</a>
					<a href="about.html">About</a>
					<a href="about.html#services">Services</a>
					<a href="careers.html">Careers</a>
					<a href="contact.html">Contact</a>
					<a href="contact.html#quote">Quote</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1><span>Social</span></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>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1><span>Contact</span></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>
	<script src="../script.js"></script>
</body>
</html>

答案 1 :(得分：0)

可能值得通过jquery函数向您的元素添加一个类，然后您只能在不具有该类的元素（不是GalaxyS7）上调用-300px

https://api.jquery.com/addclass/

尽管如此，我认为最好使用“最小宽度”而不是“最大宽度”来创建媒体查询，以确保在较小的屏幕上具有兼容性。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

相关问题
最新问题