使内容适合窗口的宽度

如何解决使内容适合窗口的宽度

我在设计时是一个完全的菜鸟。但是，我正在尝试使用dribbble中的模型构建登录页面。一切看起来还不错，直到我尝试使其响应为止。当屏幕宽度小于840 px左右时，元素的宽度不适合屏幕宽度。

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>

解决方法

使用媒体查询来提高网站的响应性，请尝试以下代码！

/* Mobile first */
.container {
  
}

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

详细了解CSS @media

使内容适合窗口的宽度

如何解决使内容适合窗口的宽度

解决方法

相关推荐