使内容适合窗口的宽度

Question

我在设计方面完全是个菜鸟。但是，我正在尝试使用来自dribbble 的模型构建登录页面。一切看起来都很好，直到我试图让它响应。屏幕宽度小于840px左右时元素的宽度不适合屏幕宽度

This is the image of the page when the width is less than 840px.

This the image of the page when the screen is greater than 840px

如果有人能在这里指导我或指出到底哪里出了问题，我将不胜感激。

HTML

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

:root {
  --primary-color: rgb(243, 145, 161);
  --secondary-color: rgb(60, 60, 146);
  --heading-font: 'Jomolhari', serif;
  --body-font: 'Roboto', sans-serif;
  --body-text-color: rgb(151, 151, 151);
}

html {
  font-size: 10px;
  font-family: var(--body-font);
  color: var(--body-text-color);
  scroll-behavior: smooth;
}

.container {
  width: 100%;
  max-width: 165.5rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}

a {
  text-decoration: none;
  color: var(--body-text-color);
}

p {
  font-size: 1.4rem;
}

section {
  padding: 3.9rem 0;
}

img {
  width: 100%;
  height: 100%;
  
}


/* Header */

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.logo {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-color);
  font-family: var(--heading-font);
}

.nav {
  height: 7.2rem;
  padding: 0 6rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.nav-list {
  list-style: none;
  display: flex;
}

.list-items {
  margin: 0 1.5rem;
  position: relative;
}

.nav-link {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--body-text-color);
  transition: color .1s;
}

.nav-link::after {
  content: '';
  height: 2px;
  width: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--secondary-color);
  transition: width .5s ease 0s;
}

.nav-link:hover,
.nav-link:hover::after {
  width: 100%;
  color: var(--secondary-color);
}


/* header ends */


/* hero section */

#hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 6rem;
  background: linear-gradient(to bottom, rgb(247, 202, 210), transparent);
  background-size: cover;
}

.global-headline {
  color: var(--secondary-color);
  font-family: var(--heading-font);
  font-size: 5.5rem;
}

#hero p {
  font-size: 2rem;
  margin: 3rem auto;
}

.btn {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  background-color: var(--primary-color);
  font-size: 1.2rem;
  padding: 1.5rem 5rem;
  border-radius: 30px;
}

.btn:hover,
.btn:focus {
  box-shadow: 0 0 25px var(--primary-color);
}

<!-- Header starts -->
<header>
  <div class="container">
    <nav class="nav">
        <a href="" class="logo">Plant<i class="fas fa-fan fa-fw"></i>Bloom</a>
        <ul class="nav-list">
          <li class="list-items">
            <a href="" class="nav-link">Home</a>
          </li>
          <li class="list-items">
            <a href="" class="nav-link">About</a>
          </li>
          <li class="list-items">
            <a href="" class="nav-link">Shop</a>
          </li>
          <li class="list-items">
            <a href="" class="nav-link">Contact</a>
          </li>
          <li class="list-items">
            <a href="" class="nav-link"><i class="fas fa-shopping-bag fa-fw"></i></a>
          </li>
      </ul>
    </nav>
  </div>
</header>

<!-- Header ends -->

<!-- hero section -->
<section id="hero">
  <div class="container">
    <div class="global-headline">
      <h2>Fresh Flower,</h2>
      <h2>Perfect Gifts</h2>
    </div>

    <p>Send flower for someone you love</p>

    <a href="#" class="btn">SHOP NOW</a>
  </div>
</section>

Answer 1

使用媒体查询来提高网站的响应能力，试试下面的代码！

/* Mobile first */
.container {
  
}

/* 840px and above */
@media all and (min-width: 840px) {
  .container {
  
  }
}

了解更多关于 CSS @media

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries