Question

所以我创建了一个从头开始使用纯HTML和CSS以及崇高文本的网站，我创建了这个网站，以显示在我的投资组合中，以显示潜在的雇主。我是这个领域的新手，我还没有找到工作，所以我给自己个人项目炫耀。网站上的所有内容都正常工作，但现在我想让它适合移动设备。

我已经使用我在Youtube上观看有关该主题的视频的知识添加了一些断点。但是，如何定位给定屏幕的每个可能的宽度和高度？例如，320px宽，它看起来很好。我拿走了标题中的图像并固定了页脚，但是当我达到321像素宽时，一切都变得混乱。我的问题是如何解决这个问题？我可以在媒体查询中做些什么来定位所有内容？这是代码：

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-image: url(../images/bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}
/*------------------Header Styling------------------*/
header {
  background-color: white;
  border-bottom-style: solid;
  overflow: auto;
  height: 200px;
  font-family: "Freehand521 BT", Arial, Sans-serif;
}
header p {
  font-family: "Freehand521 BT", Arial, Sans-serif;
  margin: 20px 0px 0px 20px;
  font-size: 60px;
}
header img {
  float: right;
  border-left: solid;
}
/*------------------Main Nav Styling------------------*/
#mainlinks {
  margin-top: 60px;
}
#mainlinks ul {
  margin-bottom: 0px;
}
#mainlinks a {
  list-style-type: none;
  text-decoration: none;
  color: black;
  margin-right: 90px;
  margin-left: -10px;
  font-size: 25px;
}
#mainlinks a:hover {
  color: #D423A2;
  transition: all 0.5s;
}
#mainlinks li {
  display: inline;
  padding-right: 5px;
}
/*------------------Secondary Nav Styling------------------*/
.secondlinks li {
  display: inline;
  list-style-type: none;
}
.secondlinks ul {
  padding-left: 0px;
}
.secondlinks a {
  margin-right: 30px;
  text-decoration: none;
  color: black;
}
.secondlinks a:hover {
  color: #7A0A56;
  transition: ease-in-out 0.7s;
}
.secondlinks a#moon:hover {
  color: #FFE619;
  transition: ease-in-out 0.7s;
}
.secondlinks a#mars:hover {
  color: #E30000;
  transition: ease-in-out 0.7s;
}
.secondlinks a#mercury:hover {
  color: #1BB9EB;
  transition: ease-in-out 0.7s;
}
.secondlinks a#jupiter:hover {
  color: #21EB47;
  transition: ease-in-out 0.7s;
}
.secondlinks a#venus:hover {
  color: #F7B20F;
  transition: ease-in-out 0.7s;
}
/*------------------Main Content Styling------------------*/
#contentwrap {
  background-color: rgba(231, 231, 231, .7);
  border-style: solid;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 150px;
  padding: 15px;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Freehand521 BT", Arial, Sans-serif;
  font-size: 17px;
}
#contentwrap img {
  border-style: solid;
}
.top {
  text-align: center;
  color: black;
  text-decoration: none;
}
.top :hover {
  color: #D423A2;
  transition: all 0.5s;
}
/*------------------Footer Styling------------------*/
footer {
  background-color: #fff;
  border-top-style: solid;
  margin-top: -130px;
  width: 100%;
  height: 130px;
  font-family: "Freehand521 BT", Arial, Sans-serif;
  font-size: 15px;
  position: relative;
  clear: both;
}
#footernav {
  float: right;
}
#footernav li {
  display: inline;
}
#footernav a {
  color: black;
  text-decoration: none;
  margin-right: 30px;
}
#footernav a:hover {
  color: #D423A2;
  transition: all 0.5s;
}
#copyright {
  position: absolute;
  left: 550px;
  bottom: 30px;
}
/*------------------Media Queries for Responsive Design------------------*/

@media screen and (max-width:960px) {
  #header {
    width: auto;
  }
  #contentwrap {
    width: auto;
  }
  #footer {
    width: auto;
  }
  #copyright {
    left: 300px;
  }
}

@media screen and (max-width: 812px) {
  header p {
    font-size: 50px;
  }
  #copyright {
    left: 250px;
  }
}

@media screen and (max-width: 320px) {
  header p {
    font-size: 29px;
  }
  #mainlinks a{
    font-size: 20px;
    margin-right: 15px;
  }
  header img {
    width: 0px;
    height: 0px;
  }
  #copyright {
    left: 100px;
    font-size: 10px;
  }
  #pharaoh_90_content img {
    width: 100%;
  }
  #queen_nehelenia_content img {
    width: 100%;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Defenders Of The Stars!--The Official Sailor Moon Fanpage!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="images/SM.ico">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="style/normalize.css">
</head>
<body>
<header>
  <img src="images/HeaderSilouette.png" alt="Defenders Of The Stars Header" width="200" height="200">
  <p>Defenders of the stars!</p>
  <nav id="mainlinks">
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="ss.html">Sailor Senshi</a></li>
      <li><a href="villains.html">Villains</a></li>
    </ul>
  </nav>
</header>
<div id="contentwrap">
  <h1> Welcome Fans!</h1>
  <p>Welcome to the Official Sailor Moon Fanpage! Here you will find a lot of information about the Sailor Moon Universe! Including Characters and villains alike, As well as an overview of the story so far. We will also keep this Page updated with the latest happenings in the world of Sailor Moon!</p>
  <p><u>July 5 2014</u> - New Sailor Moon Anime, Sailor Moon Crystal is released!</p>
</div>
<footer>
  <p id ="copyright">&copy; Copyright 2016 Jorge Goris.<br />Designed and developed by Jorge Goris.</p>
  <nav id="footernav">
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="ss.html">Sailor Senshi</a></li>
      <li><a href="villains.html">Villains</a></li>
    </ul>
  </nav>
</footer>
</body>
</html>

＆＃13;

Answer 1

您必须考虑网站的设计和元素，并决定哪种屏幕尺寸，要显示的内容以及要隐藏的内容等最佳。然后，通过使用媒体查询，您可以定位每个不同的屏幕尺寸范围，并对元素上应用的样式进行更改，以使网站响应。

至于你说网站在321px之后搞砸了 - 你需要定义更多针对不同屏幕尺寸的媒体查询，超出320px的范围。一旦你这样做，你的网站看起来会很好，无论它在哪个设备上查看。

以下是有关标准媒体查询的文章，可帮助您定义范围： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

围绕响应式设计包裹我的头（和这个网站）

1 个答案: