【发布时间】：2022-02-06 21:21:55
【问题描述】：
我最初为笔记本电脑视图创建了一个网页，我尝试使用媒体查询来调整 css 样式并使其适合 ipad 和移动设备，因为我将 (.content) 元素的宽度设置为 100%，内容实际上并没有变成100%，有比较大的余量。我还想说我使用相对位置来调整表单的位置，以及我最初笔记本电脑视图中的段落元素，它会影响我的媒体查询吗？ 任何帮助将不胜感激，我明天必须提交此作业：D 谢谢
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: rgb(250, 250, 250);
}
.content {
max-width: 1400px;
margin: auto;
background: rgb(247, 246, 244);
padding: 10px;
}
div.logo {
width: 100%;
height: 200px;
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: 19px;
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);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left:1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:74px;
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: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:140px;
background-color: rgb(240, 239, 228);
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:300px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
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: 1000px ;
bottom: 524px;
font-size: 12px;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
@media screen and (max-width:915px) {
.content{
width: 100%;
}
.inner-body {
width: 100%;
}
}
@media screen and (max-width:415px) {
.content{
width: 100%;
}
.inner-body {
width: 100%;
}
}<!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-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
<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>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p>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"><br>
<div id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff@wearview.com">
</div><br>
<div>
<select 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>
<div class="error" id= "errorMsg3"></div><br>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15" cols="50"></textarea>
</div>
<div class="error" id= "errorMsg4"></div>
<div>
<button 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="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
<a href="inbox.html" title=" User Inbox">Inbox</a> <br><br>
<a href="notifications.html" title="Notifications">Notifications</a> <br><br>
<a href="files.html" title="Files">Files</a> <br><br>
<a href="settings.html" title="Settings">Settings</a> <br><br>
<a href="help.html" title="Help">Help</a> <br><br>
<a href="qr-for-mobile.html" title="QR for Mobile">QR For Mobile</a> <br><br>
<a 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="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy@wearview.com</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Userful 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 = "Facebook" /></a>
<a href="https://www.twitter.com" title= "twitter"><img class="tw" src="image/tw.jpg" alt = "Twitter" /></a>
<a href="https://www.youtube.com" title= "youtube"><img class="yt" src="image/you.png" alt = "Youtube" /></a>
<a href="https://www.linkedin.com" title= "linkedin"><img class="ln" src="image/linkd.png" alt = "LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css responsive-design