使内容适合窗口的宽度

Question

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

这是宽度小于 840px 时页面的图像。

这是屏幕大于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