【发布时间】：2022-02-08 19:32:06
【问题描述】：
我为 (max-width 915px) 设置的媒体查询会更改我为桌面创建的 CSS 的高度，即使查询是在原始 CSS 之后进行的，并且当我更改原始 CSS 中的某些内容时，它会反映在媒体查询，即使值不同并且应该被覆盖。 请检查创建的“表单元素”并尝试修改css原始部分的顶部和左侧定位属性
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.content {
width: 1400px;
margin: auto;
padding: 10px;
}
p {
color: rgb(97, 87, 226);
}
p.foots {
color:black ;
}
.para2 {
color: black;
}
.logo {
width: 100%;
height: 300px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
.navi3:link {
color: rgb(7, 7, 7);
}
.logo-top {
margin-left: 20px;
width: 600px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/bk.png);
margin-bottom: 20px;
border-style: solid;
margin-top: 20px;
height: 1800px;
position: relative;
}
.header {
width: 700px;
position: relative;
left: 338px;
font-size: 30px;
top:100px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:200px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: 725px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:225px;
background-color: rgb(206, 200, 180);
}
.field {
width: 300px;
font-size: 18px;
}
.field2 {
width: 600px;
font-size: 18px;
}
.field3 {
width: 300px;
height: 30px;
border-radius: 10px;
margin-top: 10px;
background-color: rgb(193, 211, 205);
cursor: pointer;
}
.field4 {
width: 300px;
font-size: 18px;
cursor: pointer;
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:228px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 50px;
bottom: 100px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
footer{
background-color: rgb(126, 226, 230);
height: 200px;
}
.footimage {
width: 400px;
margin: 0;
}
div.contact{
width: fit-content;
height: 200px;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left:750px;
bottom:400px;
}
.connect {
width: fit-content;
position: relative;
left: 1100px ;
bottom: 524px;
font-size: 12px;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
@media screen and (max-width:915px) {
div.logo {
width: 900px;
height: 400px;
background-color: rgb(147, 235, 238);
-ms-flex-item-align: center;
}
.logo-top {
width: 800px;
}
.content {
width: 100%;
height: 100vh;
padding: 0;
}
.inner-body {
background-image: url(image/book2.png);
height: 1800px;
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 900px;
position: relative;
}
div.navi {
width: 900px;
font-size: 28px;
padding-bottom: 90px;
}
.header {
left: 50px;
}
.para {
width: 680px;
display: block;
left: 80px;
font-size: 35px;
padding: 30px;
top: 10px;
align-items: center;
}
form {
width: 700px;
left: 80px;
font-size: 30px;
border-style: solid;
}
.field {
width: 400px;
font-size: 30px;
}
.field2 {
width: 600px;
font-size: 30px;
}
.field3 {
width: 300px;
height: 30px;
border-radius: 10px;
margin-top: 10px;
background-color: rgb(193, 211, 205);
font-size: 25px;
cursor: pointer;
}
.field4 {
width: 300px;
font-size: 30px;
cursor: pointer;
}
.navi2 {
display: none;
}
footer {
display: none;
padding: 0;
list-style: none;
background-color: rgb(126, 226, 230);
font-size: 20px;
}
.contact {
display: none;
}
.connect {
display: none;
}
.usefullinks{
display: none;
}
.footimage {
width: 300px;
}
.error {
color: red;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
}
@media screen and (max-width:415px) {
div.logo {
width: 920px;
height: 400px;
background-color: rgb(147, 235, 238);
-ms-flex-item-align: center;
}
.logo-top {
width: 800px;
}
.content {
width: 100%;
height: 100vh;
padding: 0;
}
.inner-body {
background-image: url(image/book2.png);
height: 100%;
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 920px;
position: relative;
align-items:center;
}
div.navi {
width: 920px;
font-size: 28px;
padding-bottom: 90px;
}
.header {
left: 50px;
}
.para {
width: 680px;
display: block;
left: 80px;
font-size: 35px;
padding: 30px;
top: 10px;
align-items: center;
}
form {
width: 700px;
left: 80px;
font-size: 30px;
border-style: solid;
}
.field {
width: 400px;
font-size: 30px;
}
.field2 {
width: 600px;
font-size: 30px;
}
.field3 {
width: 300px;
height: 30px;
border-radius: 10px;
margin-top: 10px;
background-color: rgb(193, 211, 205);
font-size: 25px;
cursor: pointer;
}
.field4 {
width: 300px;
font-size: 30px;
cursor: pointer;
}
.navi2 {
display: none;
}
footer {
display: none;
padding: 0;
list-style: none;
background-color: rgb(126, 226, 230);
font-size: 20px;
}
.contact {
display: none;
}
.connect {
display: none;
}
.usefullinks{
display: none;
}
.footimage {
width: 300px;
}
.error {
color: red;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports2.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img class="logo-top" src="image/logo1.png" alt="Logo Top: WearviewAcademy Logo" >
</div>
<div class="navi">
<nav>
<p class>
<a href="homepage.html" title=" Home Page"> Home</a> |
<a href="academics.html" title=" Academics Page">Academics</a> |
<a href="services.html" title=" Services">Services</a> |
<a href="covid-19.html" title=" Covid-19 Page">Covid-19</a> |
<a href="students&parents.html" title=" Students&Parents Page">Students & Parents</a> |
<a href="Transcripts.html" title="Transcripts Page">Transcripts</a> |
<a href="staff.html" title="Staff Page">Staff</a> |
<a href="career.html" title="Career Available">Career</a> |
<a href="events" title="Events Page">Events</a> |
<a href="studentaccount.html" title="Student Account">Student Account</a> |
</p>
</nav>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html">
<div class="error1" id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input class="field" id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input class="field" id="email" type="email" placeholder="staff@wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<select class="field4" name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<textarea class="field2" id="description" placeholder="Description goes here" name="descript" rows="15" cols="90"></textarea>
</div>
<div>
<button class="field3" type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
</div>
<div class="user-links">
<navi class="navi3">
<a class="navi3" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
<a class="navi3"href="inbox.html" title=" User Inbox">Inbox</a> <br><br>
<a class="navi3" href="notifications.html" title="Notifications">Notifications</a> <br><br>
<a class="navi3" href="files.html" title="Files">Files</a> <br><br>
<a class="navi3" href="settings.html" title="Settings">Settings</a> <br><br>
<a class="navi3"href="help.html" title="Help">Help</a> <br><br>
<a class="navi3"href="qr-for-mobile.html" title="QR for Mobile">QR For Mobile</a> <br><br>
<a class="navi3"href="logout.html" title="Log Out">Log Out</a>
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id = "footy">
<div>
<img class="footimage" src="image/logo1.png" alt="bottom logo- Wearview Academy" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p class="foots"><img class="emaillogo" src="image/email (2).png" alt="logo-email"> :wearview_academy@wearview.com</p>
<p class="foots"><img class="telelogo" src="image/tele.png" alt="logo-telephone"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li><a href="career.html" title=" Jobs Available">Career</a></li>
<li><a href="websiteerror.html" title=" Report A Website Issue">Report A Website Issue</a></li>
<li><a href="aboutus.html" title="About Us">About Us</a></li>
<li><a href="covid-19.html" title="Covid-19">Covid-19</a></li>
<li><a href="events" title=" FAQs Page">Events</a></li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<a href="https://www.facebook.com" title= "facebook"><img class="fb" src="image/fb.png" alt = "logo-social media-Facebook" /></a>
<a href="https://www.twitter.com" title= "twitter"><img class="tw" src="image/tw.jpg" alt = "logo-social media -Twitter" /></a>
<a href="https://www.youtube.com" title= "youtube"><img class="yt" src="image/you.png" alt = "logo-social media-Youtube" /></a>
<a href="https://www.linkedin.com" title= "linkedin"><img class="ln" src="image/linkd.png" alt = "logo-social-media-LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>，你会注意到它也对媒体查询生效。
【问题讨论】：
-
您还必须在媒体查询中为 form 指定高度。
-
这里有很多代码。请阅读stackoverflow.com/help/minimal-reproducible-example 并删除任何不需要显示您的问题的代码。
标签： html css responsive-design media-queries