我是Web开发的新手，我已经建立了一个3页的小网站。我的目标是使用@media标签使之响应以下各项：max-width s：980px，768px和640px。我做了第一页，这一直很奇怪。如何使整个网站具有响应能力？请协助。我所有3页和媒体的代码均已随附。谢谢。
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact"><a href="contact.html">Contact</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
  To briefly introduce the... to you I would say it is a country located on the........>
    shares the same borders with ....... It is the world largest<br>
 producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br>  real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br>   "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li><a href="contact.html">Contact</a></li>
<li>Portfolio</li>
<li><a href="index.html">About Me</a></li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html">About Me</a></li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
  Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
  Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example@yahoo.com">
<br><br>
  Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
  <input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
@media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
@media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
答案 0 :(得分：0)
首先删除固定的width属性。我很难看清您在所有内容上的需求width: 50%。然后，首先解决您的.container元素的样式。
一种好的方法是将max-width设置为您要记住的宽度，以便在普通桌面屏幕上查看该网站，在我使用的600px演示中，您可以使用任何感觉不错。
然后在您的媒体查询中分配一个新的max-width值，该值适合查询中的屏幕尺寸，在这里我使用80%是因为通常在小屏幕上，您希望内容大部分填充宽度屏幕的侧面留有少量空间，不过您可以再次通过各种方式配置它。
这里的主要事情是您的容器元素现在可以响应，并且其中的内容可以填充您想要的空间。运行该代码段，然后单击“整页”链接以调整屏幕宽度并查看行为。
.container {
max-width: 600px;
margin: 0 auto;
}
@media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact"><a href="contact.html">Contact</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
  To briefly introduce the... to you I would say it is a country located on the........>
    shares the same borders with ....... It is the world largest<br>
 producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br>  real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br>   "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
答案 1 :(得分：0)
我希望您对最终产品的外观有所了解，这将很有帮助。使页面具有响应性，不仅仅是编写有效的HTML标签以及相应的样式和思维错字，因为从代码中，额外的%符号将使
.middle-about-me{
width: 50%%;
}
行为不端。
为了使页面响应有效并非常接近您想要的内容，您需要了解几件事。
首先，您应该考虑使用normalize.css重置浏览器自然应用于有效HTML标记的默认样式，或者利用通用选择器的功能，这在现代浏览器中几乎一样，
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
因此使用该基本重置，您可以始终依靠使用em或rem来设置字体，并在合适时使用图像和其他块元素的百分比。
编写这篇文章不足以教会您有关网络响应能力的所有知识，但我希望它为您提供了帮助。同时，这些不是我由“乔纳斯·施梅特曼”（Jonas Schmedtman）修读的课程的初衷，他实际上以为我是。
如果您对最终页面的外观有所了解，或者您对我到目前为止一直试图解释的内容仍不太清楚，请随时添加评论，以便我们一起整理。