修复移动端CSS宽度问题

Question

​

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import "variables";
@import "utilities";
body {
  color: $neutral;
  font-family: "Open Sans", sans-serif;
  background-color: $main-bg;
}

a {
  color: $cyan;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

p {
  font-family: "Raleway", sans-serif;
}

#header {
  grid-area: heading;
  height: 100vh;
  background-color: $intro-email;
  position: relative;
  background-image: $bg-image;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  //   &::before {
  //     content: "";
  //     background-image: $bg-image;
  //     position: absolute;
  //     width: 100%;
  //     background-size: contain;
  //     background-repeat: no-repeat;
  //     background-position: left bottom;
  //   }
  .navbar {
    grid-area: heading;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6rem;
    .nav-list {
      display: flex;
      li {
        padding: 1rem 1.2rem;
        text-transform: uppercase;
        a {
          text-decoration: none;
          color: #fff;
          text-transform: uppercase;
          border-bottom: 3px transparent solid;
          padding-bottom: 0.5rem;
          transition: border-color 0.5s;
          font-size: 0.8rem;
          font-weight: 400;
          font-family: "Raleway", sans-serif;
          &:hover {
            border-color: #fff;
          }
          &.current {
            border-color: #fff;
          }
        }
      }
    }
  }
  .header-content {
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
    width: 600px;
    img {
      max-width: 90%;
      margin-top: -50px;
    }
  }
}

Variabes for CSS $intro-email: hsl(217, 28%, 15%);
$main-bg: hsl(218, 28%, 13%);
$footer-bg: hsl(216, 53%, 9%);
$testimonial-bg: hsl(219, 30%, 18%);
$neutral: hsl(0, 0%, 100%);
$cyan: hsl(176, 68%, 64%);
$blue: hsl(198, 60%, 50%);
$website-width: 1440px;
$bg-image: url("../img/bg-curvy-desktop.svg");
Container .container {
  width: $website-width;
  max-width: 100%;
  padding: 2rem;
  margin: 0 auto;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />

<header id="header">
  <div class="container">
    <div class="wrapper">
      <nav class="navbar">
        <img src="../dist/img/logo.svg" alt="" />
        <ul class="nav-list">
          <li><a href="#" class="current">Features</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">SignIn</a></li>
        </ul>
      </nav>
      <div class="header-content">
        <img src="../dist/img/illustration-intro.png" alt="" />
        <h1 class="title">
          All your files in one secue location, accessible anywhere
        </h1>
        <p class="text">
          Flyo stores all your most important files in one secure location. Access them whenever you need, share and collaborate with friends, family and co-workers
        </p>
        <button class="btn-main">Get Started</button>
      </div>
    </div>
  </div>[Image showing what is happening in my code][1]
</header>

​

网站宽度设置为1440px，但每当我在屏幕上移动到移动版本时，网站的宽度永远不会相同，并且网站的一些元素开始脱离网站的位置，有没有办法解决这个问题，或者我应该移除嵌套元素的容器，因为这是设计网站的宽度

​

​

Answer 1

对于你的容器，考虑使用像width: 100vw这样的响应式宽度(即100%的视区/窗口宽度)。或者，如果你真的想坚持使用1440px，你可以使用媒体查询。

媒体查询有助于将不同的CSS规则应用于不同的设备屏幕大小，例如：

@media(max-width: 599px) {
    .container {
        /* Your styling for mobile phones */
    }
}

@media(min-width: 600px) {
    /* Your styling for desktops */
}