我迫切需要帮助。我已经很接近完成决赛了，但是我不太了解媒体查询。我必须“包括媒体查询来更改页面以适合平板电脑和移动设备查询。您将缩小页面的宽度以适合屏幕。您还将关闭对所选图像的可见性。”
他没有很好地解决问题，我一直在混乱中搜寻站点。现在，我不确定要使用什么尺寸，或者是否需要为手机和平板电脑编码一个全新的布局。我只需要一些指导即可。
不确定是否需要此代码，但为防万一，我将包括一页和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>
答案 0 :(得分：3)
据我所知，您只是一个入门者，首先，您需要使用视口代码来使页面在所有不同的设备上正常工作，以下是视口代码。
<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}
如果您不使用查看端口，则查询将不起作用，还需要在代码中添加<body></body>，现代浏览器并不需要，但是您必须像旧版浏览器一样进行操作无法理解您的代码，您的页面将被破坏并且无法使用。
一些更多信息可以在下面找到：
another Media query source (CSS Tricks
HTML5 responsive web pages W3C
希望获得帮助
答案 1 :(得分：1)
您已经提供了一些不错的资源，这是一个小示例，说明如何在CSS中使用媒体查询。只需在括号内添加设备特定的样式即可。
// everything mobile and above
@media screen and (min-width: 480px) {
// everything mobile landscape and above
}
@media screen and (min-width: 768px) {
// everything tablet and above
}
@media screen and (min-width: 1024px) {
// everything notebook and above
}
示例，注释中有一些解释。
// everything mobile and above
.someClass {
width: 200px; // base style
background: green; // style for all devices, since not overridden
}
@media screen and (min-width: 1024px) {
// everything notebook and above
.someClass {
width: 400px; // overrides mobile style for notebook and above
color: red; // only for notebook and above
}
}