Question

所以我尝试了一切似乎所有东西，使我的单页组合正确响应，无论它没有正确调整大小。我重新开始构建它，所以我可以把它弄清楚，但没有运气。我的代码到目前为止只是标题和关于部分。调整大小时，标题会正确调整大小并且文本超出边距之外的查看区域。而且图像也没有调整大小。我试过img-fluid，img response。我还尝试将所有内容包装在容器或容器中，以及其他一些内容，包括教程。我不确定为什么它不会整齐地调整大小。请帮忙。关于我应该学习什么以便更熟悉调整大小的建议会有所帮助。谢谢！

.stay {
  position: fixed;
  width: 100%;
  background: #4E0250;
  color: #E1E1E1;
  z-index: 3;
}

.last {
  position: relative;
  margin-left: 350px;
  float: left;
}

div,
h4 {
  font-family: 'Montserrat', sans-serif;
}

nav,
ul,
li {
  font-size: 1em;
  float: right;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 80px;
  margin-top: 17px;
}

a:link,
a:visited,
a:hover,
a:active {
  color: #E1E1E1 !important;
  text-decoration: none !important;
}

h2 {
  font-weight: bold;
  text-transform: uppercase;
}

#quote {
  padding: 50px 0 30px 0;
  font-size: 1.6em;
  color: #2CEAA3
}

p {
  font-size: 1.6em;
  padding: 0 15px 40px 15px;
  text-align: center;
}

#bb::after {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  /* This will put the pseudo element on its own line. */
  margin: 0 auto;
  /* This will center the border. */
  width: 50%;
  /* Change this to whatever width you want. */
  padding-bottom: 10px;
  /* This creates some space between the element and the border. */
  border-bottom: 3px solid #fff;
}

#about,
#portfolio,
#contact {
  width: 1085px;
  position: relative;
  margin: 0 auto;
}

#main {
  position: relative;
  height: auto;
  width: 100%;
  top: -82px;
  border-radius: 50%;
}

#about {
  background-color: #696969;
  padding: 150px 25px 25px 25px;
  text-align: center;
  color: #fff;
  margin-bottom: -25px;
}

<body>
  <div class="stay container-fluid">
    <h1 class="last">.Scoops</h1>
    <div class="navcon">
      <nav>
        <ul>
          <li><a id="connav" href="#contact2">Contact</a></li>
          <li><a id="portnav" href="#portfolio2">Portfolio</a></li>
          <li><a id="abnav" href="#about">About</a></li>
        </ul>
      </nav>
    </div>

  </div>
  <!--end stay-->

  <div id="about" class="scroll">
    <img id="main" class="img-fluid" src="https://photos.smugmug.com/Galleries/Pittsburgh/North/i-LHs7Xwx/1/70f87c14/XL/Winters%20Light%20Pittsburgh%20Skyline%20North%20Shore%20Selective%20Color-XL.jpg" alt="Pittsburgh black and white" />
    <h2 id="bb">Welcome</h2>
    <h3 id="quote">"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</h3>
    <p>Hey, I'm <span style="font-size: 24px; color:#2CEAA3"><strong>Scoops!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#2CEAA3"><strong>Front-End Web Developer</strong></span>.
      My journey began with <span style="font-size: 24px; color: #2CEAA3"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #2CEAA3"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned
      <span style="font-size: 24px; color: #2CEAA3"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference, while challenging myself and continually improving my
      craft. <span style="font-size: 24px; color: #2CEAA3"><strong>I'm passionate</strong></span> about Nature, animals, traveling, giving back to those in need, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer.</p>
  </div>
  <!--end about-->

</body>

Answer 1

为什么不使用bootstrap，foundation，simple grid等库？

Bootstrap是一个响应式库，它可以帮助处理移动设备和平板电脑等不同设备的响应式项目，这是一个易于使用的框架，可以从文档中轻松学习。

Answer 2

尝试使用max-width而不是width：

#about,
#portfolio,
#contact {
  max-width: 1085px;
  position: relative;
  margin: 0 auto;
}

Answer 3

你在下面的css块中有缺陷。当您做出响应时，不要给任何容器提供固定宽度，请使用百分比宽度。

#about,
#portfolio,
#contact {
  width: 1085px;
  position: relative;
  margin: 0 auto;
}

以下css使代码响应

#about,
#portfolio,
#contact {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

整体css并不完美，可写得更好。

Answer 4

图像的问题在于其宽度定义为固定宽度容器（#about）的百分比。更好的是给#about容器，例如大屏幕宽度为80％，使用媒体查询将较小屏幕的宽度更改为更大的百分比：

#about,
#portfolio,
#contact {
  width: 70%; /* CHANGED */
  position: relative;
  margin: 0 auto;
}

@media screen and (max-width: 1300px) { /* ADDED */
  #about {
    width: 90%;
  }
}

这使得文本和图像都具有响应性。

关于标题，通常的做法是使用position：fixed作为标题。但如果这是你想要的，我会把它保留在那里。但是标题没有响应的原因是类.last的固定左边距。在必要时使用媒体查询将其更改为较小的大小（只需调整窗口大小并找出不合适的位置，并添加带有媒体查询的断点来修复它。）您可以做什么：

@media screen and (max-width: 1300px) { /* ADDED */
  .last {
    margin-left: 150px;
  }
}
@media screen and (max-width: 800px) { /* ADDED */
  .last {
    margin-left: 20px;
  }
}

对于您的菜单，您为nav，ul en li定义了相同的右边距。最好为li定义单独的右边距（以保持菜单项彼此分开），并为nav单独设置右边距。这使您可以更好地控制媒体查询：

nav { /* ADDED */
  float: right;
  display: inline-block;
  margin-right: 120px;
  margin-top: 17px;
}
li { /* ADDED */
  text-decoration: none;
  font-size: 1em;
  float: right;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 40px;
  margin-top: 17px;
}

现在您只需要一个小屏幕（手机）菜单的解决方案。

现在合并代码：

.stay {
  position: fixed;
  width: 100%;
  background: #4E0250;
  color: #E1E1E1;
  z-index: 3;
}

.last {
  position: relative;
  margin-left: 350px;
  float: left;
}

div,
h4 {
  font-family: 'Montserrat', sans-serif;
}
/* DELETED
nav,
ul,
li {
  font-size: 1em;
  float: right;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 80px;
  margin-top: 17px;
} */
nav { /* ADDED */
  float: right;
  display: inline-block;
  margin-right: 120px;
  margin-top: 17px;
}
li { /* ADDED */
  text-decoration: none;
  font-size: 1em;
  float: right;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 40px;
  margin-top: 17px;
}

a:link,
a:visited,
a:hover,
a:active {
  color: #E1E1E1 !important;
  text-decoration: none !important;
}

h2 {
  font-weight: bold;
  text-transform: uppercase;
}

#quote {
  padding: 50px 0 30px 0;
  font-size: 1.6em;
  color: #2CEAA3
}

p {
  font-size: 1.6em;
  padding: 0 15px 40px 15px;
  text-align: center;
}

#bb::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
  padding-bottom: 10px;
  border-bottom: 3px solid #fff;
}

#about,
#portfolio,
#contact {
  width: 70%; /* CHANGED */
  position: relative;
  margin: 0 auto;
}

#main {
  position: relative;
  height: auto;
  width: 100%;
  top: -82px;
  border-radius: 50%;
}

#about {
  background-color: #696969;
  padding: 150px 25px 25px 25px;
  text-align: center;
  color: #fff;
  margin-bottom: -25px;
}
@media screen and (max-width: 1300px) { /* ADDED */
  #about {
    width: 90%;
  }
  .last {
    margin-left: 150px;
  }
}
@media screen and (max-width: 800px) { /* ADDED */
  .last {
    margin-left: 20px;
  }
}

（HTML不变）

无法使网站响应

4 个答案: