如何使内容在较小的屏幕上具有 100% 宽度？

Question

我真的需要有人帮助我解决这个问题：我正在使用 Flexbox 构建响应式网页，但是当我调整到较小的屏幕尺寸时，所有内容都会失去全宽，并且右侧会出现“空白”。我尝试用媒体查询修复它。

*, html, body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  background-color: #2F2D52;
  text-align: center;
}
nav {
  display: -webkit-flex;
  flex-wrap: -webkit-wrap;
  justify-content: center;
  gap: 3em;
  flex-direction: column;
  width: 100%;
  background-color: #5E5B8C;
}
nav ul {
  display: inline-flex;
  justify-content: space-around;
}
ul {
  width: 100%;
}
nav ul li {
  list-style: none;
  margin-bottom: .5rem;

}
ul li a {
  color: #F5F5F5;
  font-size: 1.3rem;
}
ul li a:hover {
  color: #BCFCB1;
}
h1 {
  margin-top: 1rem;
  letter-spacing: .2rem;
  font-size: 3rem;
  font-family: 'Diplomata', cursive;
  color: #F5F5F5;
}
@media only screen and (max-width: 479px) {
  nav {

  }
  nav ul {
    display: none;
  }
  h1 {
    margin: auto;
    font-size: 1.7rem;
  }
}
.banner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-image: url(space.jpg);
  background-size: cover;
  padding: 14rem 0 14rem 0;
}
.experience {
  display: block;
  line-height: 3.5em;
  text-align: center;
  width: 100%;
  background-color: rgba(245, 245, 245, .6);
}
 h2 {
   letter-spacing: .1rem;
   font-style: oblique;
   font-family: sans-serif;
   font-size: 2rem;
   margin-top: 1rem;
}
.experience h3 {
  font-style: oblique;
  font-size: 1.3rem;
  margin-bottom: .5rem;
}
button {
  height: 2em;
  width: 7em;
  margin-bottom: -20rem;
  background-color: #F5EAE4;
  color: #2F2D52;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: .2rem;
  border: .1rem solid #5E5B8C;
  border-radius: 1rem;
  box-shadow: .3rem .3rem;
}
button:hover {
  background-color: #BCFCB1;
  color: #5E5B8C;
  cursor: pointer;
}

main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}
main h2 {
  color: #F5F5F5;
}
.video {
  margin: 5rem auto;
}
h5 {
  line-height: 1.7em;
  font-size: 1.3rem;
  letter-spacing: .1rem;
  color: #F5F5F5;
}
h4 {
  color: #F5F5F5;
  font-size: 1.4rem;
  border: 1px solid #F5F5F5;
  width: 20em;
  margin-top: 2em;
  padding-top: .5em;
  padding-bottom: .5em;
}
.programs {
  width: 100%;
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3em;
  align-items: center;
  justify-content: space-around;
}
.space {
  display: flex;
  flex-direction: column;
}
.space img {
  width: 20rem;
  height: 16rem;
}
span {
color: #F5F5F5;
align-self: center;
font-size: 1.3rem;
font-weight: 500;
margin-top: 2.5rem;
border: 1px solid #F5F5F5;
padding: .5em .5em .5em .5em;

}
span:hover {
  background-color: #F5F5F5;
  cursor: pointer;
  color: #2F2D52;
}
@media only screen and (max-width: 1038px) {
  .space {
    flex-direction: column;
  }
  span {
    margin: 2.5em auto;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Diplomata&display=swap" rel="stylesheet">
    <title>Aero Space Solutions</title>
  </head>
  <body>
    <nav>
      <h1>Aero Space Solutions</h1>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Missions</a></li>
          <li><a href="#">Our Programs</a></li>
        </ul>
    </nav>
    <div class="banner">
      <div class="experience">
        <h2>Aero Space Experience</h2>
        <h3>Going above the limits and taking you to the unknown and beyond!</h3>
      </div>
      <button type="button" name="button">Explore</button>
    </div>
    <main>
        <h2>Our Programs</h2>
        <h5>Discovering new paths and setting new ways to ride into the unknown and discover deepest secrets kept in Universe.</h5>
        <h4>Choose the solution you are interested in</h4>
        <div class="programs">
          <div class="space shuttle"><img src="spacecraft.jpg" alt="spacecraft">
            <span>Space Shuttle Solutions</span>
          </div>
          <div class="space rocket"><img src="spacerocket.jpg" alt="spacerocket">
            <span>Space Rocket Solutions</span>
          </div>
          <div class="space station"><img src="spacestation.jpg" alt="spacestation">
            <span>Space Station Solutions</span>
          </div>
          <div class="space shuttle"><img src="solar.jpg" alt="spacecraft">
            <span>Space Solar Solutions</span>
          </div>
        </div>
    </main>

这是它的照片！所以，我已经为此苦苦挣扎了很长一段时间。我尝试添加位置、媒体，然后重新开始尝试查看问题出现在哪里，但无法解决。我真的希望有人能帮助我解决这个问题...

Answer 1

您可以使用媒体查询简单地做到这一点这只是告诉浏览器，当屏幕尺寸小于 600px 时，将应用媒体查询中的所有样式

@media screen (max-width: 600px) {
  .element {
    width: 100vw; 
  }
}

Answer 2

我找到的解决方案是将下一个内部项目设置为 100% 宽度，使其为全宽度。

<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-4">
   <div class="icon-box w-100">
       <div class="icon"><i class="fa fa-balance-scale"></i></div>
       <h4 class="title"><a href="/url">Some text here</a></h4>
       <p class="description">some text here</p>
   </div>
</div>

这与 bootstrap 4.x 一起使用

顶部封闭的 div.align-items-stretch 使兄弟姐妹高度相同。
内部 icon-box.w-100 使外部 div 100%

如何使内容在较小的屏幕上具有 100% 宽度？

问题描述投票：0回答：2

2个回答

最新问题

如何使内容在较小的屏幕上具有 100% 宽度？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2