时间戳

首页 > 解决方案 > 菜单栏无法缩放到屏幕大小

html - 菜单栏无法缩放到屏幕大小

问题描述

我在屏幕的最顶部有一行菜单栏。
但是，它似乎不适合显示器的尺寸。

body {
  background: #5A452E;
}

.menuWrapper {
  display: flex;
  margin: 0;
  padding: 0;
  z-index: 10;
  border-bottom: 1.5px solid white;
  height: 80px;
  background: transparent;
  align-items: flex-start;
}

.menuWrapper>* {
  display: flex;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
}

.menuWrapper .mainMenu {
  width: 43vw;
  min-width: 600px;
  max-width: 50vw;
}

.mainMenu ul,
.loginArea .loginMenu ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  vertical-align: middle;
}

.mainMenu ul li {
  align-self: flex-start;
  list-style: none;
  text-align: center;
  padding: 38px;
  line-height: 1px;
}

.mainMenu a {
  text-decoration: none;
  color: white;
  transition: all 0.5s linear;
}

.mainMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

.logoArea {
  width: 10%;
  min-width: 130px;
  height: 100%;
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
}

.logoArea img {
  width: 80px;
  height: 60px;
  margin: auto;
  display: block;
}

.loginArea {
  width: 45vw;
}

.loginArea .infoArea {
  width: 60%;
  min-width: 400px;
}

.loginArea .loginMenu {
  width: 40%;
  min-width: 200px;
  float: right;
  text-align: right;
}

.loginArea .loginMenu ul {
  display: flex;
  justify-content: flex-end;
}

.loginArea .loginMenu ul li {
  list-style-type: none;
  text-align: center;
  padding: 38px 15px;
  line-height: 1px;
}

.loginArea .loginMenu ul li a {
  text-decoration: none;
  color: white;
  transition: all 0.5s linear;
}

.loginArea .loginMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet">
<div class="menuWrapper">
  <div class="mainMenu">
    <ul>
      <li><a href="#">STORE</a></li>
      <li><a href="#">CLASS</a></li>
      <li><a href="#">CAFE</a></li>
      <li><a href="#">PLAY GROUND</a></li>
    </ul>
  </div>
  <div class="logoArea">
    <img src="../resources/images/img_common/logo-lahol2.png">
  </div>
  <div class="loginArea">
    <div class="infoArea">

    </div>
    <div class="loginMenu">
      <ul>
        <li><a href="#">SIGN IN</a></li>
        <li><a href="#">SIGN UP</a></li>
      </ul>
    </div>
  </div>
</div>

标签： htmlcssresponsive

解决方案

男人（或女孩），
你的代码是一团糟（不是真的）。你没有遵循共同的规则，这是你问题的主要原因。

首先，您没有使用任何 css 重置（询问 google 'bout this）。好吧，很多人不使用重置，但它对于跨浏览器的东西很重要。

其次，你使用vw了宽度，虽然这不是问题，但很多人避免在响应式网页设计中使用它。尝试在流体布局中使用基于“百分比”的计算，而不是vw.

第三，你有点搞砸了flex，我无法解释什么搞砸，但请考虑更多地学习flex，它在响应式网页设计中非常重要。CSS-tricks 是一个很好的解释资源。

无论如何，虽然我无法完全解决您的问题，但我找到了解决方案 - overflow。看一看 -

* {
  box-sizing: border-box;
}
body {
  background: #5A452E;
}

.menuWrapper {  
  display: flex;
  margin: 0;
  padding: 0;
  z-index: 10;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
  border-bottom: 1.5px solid white;
  background: transparent;
/*   align-items: flex-start; */
}

/* .menuWrapper>* {
} */

/*.menuWrapper - don't do this unless there are multiple .mainMemu, it only complicates the code, nothing more. Browser will catch .mainMeu anyway. Only add .menuWrapper for readability purpose. */
.mainMenu { /* PART 1 */
  width: 43vw;
  min-width: 600px;
  max-width: 50vw;
}

.mainMenu ul,
.loginArea .loginMenu ul {
  padding: 0;
  margin: 0;
  display: flex;
/*   align-items: flex-start; */
/*   vertical-align: middle; */
}

.mainMenu ul li {
  align-self: flex-start;
  list-style: none;
  text-align: center;
  padding: 38px;
  line-height: 1px;
}

.mainMenu a {
  text-decoration: none;
  color: white;
/*   transition: all 0.5s linear; - this line is useless. Hovering will work anyway in a:hover state, not here. Don't try to do this when hovering something. */
}

.mainMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

.logoArea { /* PART 2 */
/*   height: 100%; - no impact at all. Every element has a height of 100%, by default */
  width: 10%;
/*   min-width: 130px; Consider removing this. After commenting out this line, the overflown width reduced a bit, LOL*/
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
}

.logoArea img {
  width: 80px;
  height: 60px;
  margin: auto;
  display: block;
}

.loginArea { /* PART 3 */
  width: 45vw; 
  overflow: hidden; /* I added a overflow here */
}

.loginArea .infoArea {
  width: 60%;
  min-width: 400px;
}

.loginArea .loginMenu {
  width: 40%;
  min-width: 200px;
  float: right;
  text-align: right;
}

.loginArea .loginMenu ul {
  display: flex;
  justify-content: flex-end;
}

.loginArea .loginMenu ul li {
  list-style-type: none;
  text-align: center;
  padding: 38px 15px;
  line-height: 1px;
}

.loginArea .loginMenu ul li a /* well, a long line of selector here I see. If you have time, take a look here: https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672 */
{
  text-decoration: none;
  color: white;
/*   transition: all 0.5s linear; */
}

.loginArea .loginMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet">

<div class="menuWrapper">
  
  <div class="mainMenu">
    <ul>
      <li><a href="#">STORE</a></li>
      <li><a href="#">CLASS</a></li>
      <li><a href="#">CAFE</a></li>
      <li><a href="#">PLAY GROUND</a></li>
    </ul>
  </div>
  
  <div class="logoArea">
    <img src="../resources/images/img_common/logo-lahol2.png">
  </div>
  
  <div class="loginArea">
    <div class="infoArea">
    </div>
    <div class="loginMenu">
      <ul>
        <li><a href="#">SIGN IN</a></li>
        <li><a href="#">SIGN UP</a></li>
      </ul>
    </div>
  </div>
</div>

现在，问题overflow: hidden是，当您将屏幕缩小太多时，它就会.loginArea消失；不是真的，因为溢出的hidden属性，它使.loginArea隐藏。

但至少，它解决了我们的问题——水平滚动，对吧？

只需@media在880px. 那是你设计的断点，因为当你缩小更多之后880px，.loginArea就被隐藏了。使用媒体查询将垂直拉动所有内容，主要用于移动和平板电脑视图。

我试图添加@media查询，但由于你的混乱，我很难让一切正常工作。没关系。

推荐阅读