我急需帮助。我快完成期末考试了，但我不太了解媒体查询。我必须“包括一个媒体查询来更改页面以适应平板电脑和移动查询。您将缩小页面的宽度以适应。您还将关闭您选择的图像的可见性。”
他没有仔细研究，我一直在困惑中搜索网站。现在我不确定要使用什么尺寸，或者我是否需要为手机和平板电脑编写一个全新的布局。我只需要一些指导。
不确定这是否需要代码，但我会包含一个页面和 css 以防万一:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#nav {
float: right;
width: 500px;
height: 700px;
background-color: #6C8822;
color: black;
padding-left: 10px;
padding-top: 10px;
margin-right: 50px;
margin-bottom: 0px;
text-align: center;
}
#links {
margin-top: 20px;
}
a {
text-decoration: none;
color: white;
font-size: 35px;
margin-top: 70px;
}
a:hover {
color: #645399;
}
#linkborder1 {
border: 2px dotted white;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#linkborder2 {
border: 2px dotted white;
padding: 5px;
padding-left: 34px;
padding-right: 34px;
}
#linkborder1:hover {
border-color: #645399;
}
#linkborder2:hover {
border-color: #645399;
}
#header {
text-align: center;
margin-bottom: 50px;
background-color: #6C8822;
color: white;
font-size: 50px;
font-family: Comic San MS;
}
body {
background-image: url("images/bg1.jpg");
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
overflow: auto;
}
html {
overflow: hidden;
height: 100%;
}
img {
margin-left: 25px;
margin-top: 25px;
margin-right: 25px;
}
p {
font-size: 30px;
font-family: Comic Sans MS;
display: inline-block;
margin: 15px;
padding: 10px;
background-color: #CCD994;
}
#textbio {
width: 100px;
height: 50px;
margin: 15px;
padding: 10px;
}
#imagemap {
margin-left: 80px;
}
video {
margin-top: 50px;
margin-left: 105px;
margin-bottom: 25px;
width: 1280px;
height: 720;
}
#imagemap, #vid {
display : inline;
position: relative;
left:50px;
}
caption {
font-size: 24px;
}
th {
background-color: #CCD994;
}
td {
height: 50px;
border-bottom: 1.5px dashed;
width: 300px;
}
tfoot {
background-color: gray;
}
table {
table-layout: auto;
width: 15%;
float: right;
margin-bottom: 10px;
background-color: #6C8822;
position: relative;
margin: -500px;
margin-top: 480px;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
z-index: -1
}
#pics {
margin-left: 250px;
padding: 15px;
margin-bottom: 100px;
}
#table {
float: right;
margin-right: 50px;
width: 600px;
height: 700px;
font-size: 20px;
}
#form {
float: center;
background-color: #6C8822;
margin: 15px;
margin-left: 500px;
width: 600px;
font-size: 36px;
margin-bottom: 100px;
}
input {
height: 30px;
font-size: 20px;
}
select {
font-size: 36px;
}<!Doctype HTML>
<html>
<head>
<title>Page 2</title>
<link rel="stylesheet" href="finalcss.css">
</head>
<div id="header" class="center">
<h1>Final Project</h1>
</div>
<div id="nav">
<img src="images/me.png" alt="Me in Animal Crossing" width="350" height="300">
<div class="textbio">
<p>Hey I'm Jay, this is my final project! It's not much but I worked hard on it, hope you enjoy!!</p>
</div>
<div id="links">
<a id="linkborder1" href="final.html">Home</a>
<br>
<br>
<a id="linkborder2" href="final2.html">P2</a>
<br>
<br>
</div>
</div>
<div id="body">
<div id="pics">
<img src="images/padme.png" alt="" width="450px" height="450px">
<img src="images/sqs.png" alt="" width="450px" height="450px">
<br>
<img src="images/reese.jpg" alt="" width="450px" height="450px">
<img src="images/lotus.png" alt="" width="450px" height="450px">
</div>
</div>
<div id="table" class="fixed">
<table class="center">
<Caption><b>Commission</b></Caption>
<thead align="center">
<th colspan="5"><b>Type</b></th>
<th><b>Price Range</b></th>
</thead>
<tbody align="center">
<tr>
<td colspan="5">Icon</td>
<td>$5-$15</td>
</tr>
<tr>
<td colspan="5">Half-Body</td>
<td>3</td>
</tr>
<tr>
<td colspan="5">Full-Body</td>
<td>$5-$25</td>
</tr>
</tbody>
</table>
</div>
<div id="form">
<Caption><b> Contact Form</b></Caption>
<table>
<thead align="center">
</thead>
<tbody align="center">
<br>
<br>
<fieldset>
<legend></legend>
Name: <input type="text" name="name" size="40">
<br>
<br>
Address Line 1: <input type="text" name="addressline1" size="40">
<br>
<br>
Address Line 2: <input type="text" name="addressline2" size="40">
<br>
<br>
City: <input type="text" name="city" size="40">
<br>
<br>
State: <input type="text" name="state" size="40">
<br>
<br>
Zip Code: <input type="text" name="zipcode" size="40">
<br>
<br>
Email: <input type="text" name="email" size="40">
<br>
<br>
Phone Number: <input type="text" name="phonenumber" size="40">
<br>
<br>
<select name="Contact Times">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
</fieldset>
</tbody>
</table>
</div>
</html>最佳答案
正如我所见，您只是初学者，首先您需要使用视口(viewport)代码让页面在所有不同的设备上运行，视口(viewport)代码如下。
<meta name="viewport" content="width=device-width, initial-scale=1">
在此之后，在您的 CSS 文件中，您将需要使用媒体查询，这是一个断点，您会看到设计/网站/页面在某些浏览器宽度下不可用，此时您需要添加媒体查询，例如:
@media query and (max-width: 400px){ // here you should update the broken css code}
如果您不使用视口(viewport)，您的查询将不起作用，您还需要添加 <body></body>对于您的代码，现代浏览器不需要它，但您必须这样做，因为旧浏览器无法理解您的代码，并且您的页面将损坏且无法使用。
可以在下面找到更多信息:
another Media query source (CSS Tricks
HTML5 responsive web pages W3C
希望对你有帮助
关于html - 使用媒体查询更改站点宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59371314/