Question

就像标题所说我需要100％垂直高度导航栏折叠成一个全宽水平导航栏，用于较小的屏幕（当屏幕宽度变为~580px时）。

＆＃13;

body {
  margin: 0 auto;
}

ul {
  height: 100% width: 10%;
  margin: 0px;
  padding: 0px
  color: #2A2829;
  list-style-type: none;
  text-align: center;
  float: left;
  background-color: pink;
}

ul li a {
  display: block;
  padding: 8px 20px;
  text-decoration: none;
}

ul li a:hover {
  background-color: black;
  color: pink;
}

.body {
  height: 100%;
  width: 80%;
  float: right;
  color: pink;
  text-align: center;
  background-color: black;
}

＆＃13;

<body>

  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">BUSINESS</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SCHOOL</a></li>
    <li><a href="#">CONTACT</a></li>
    
    <p>
    Adding space <br />
    to make <br />
    navbar longer <br />
    </p>
  </ul>

  <div class="body">
    <div>
      <h1>
      Hello World
      </h1>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
    </div>
  </div>

＆＃13;

从那里，如果屏幕尺寸较小，我想要如下所示：

something like this

我发现有两个非常好的资源，我认为应该可以帮助我，但我在使用我的网页实现系统时遇到了麻烦。

此外，我目前不使用Bootstrap，如果我使用Bootstrap，是否更容易完成此项目？我对网络开发还很陌生，所以我提前为我的任何新闻道歉！

非常感谢。

Answer 1

您可以对宽度小于580像素的屏幕使用CSS媒体查询。例如，要使您的导航列表在移动设备上覆盖整个屏幕：

@media screen and (max-width: 580px) {
  ul {
    width: 100%;
  }
}

Answer 2

这里的基本想法是你从移动的第一个样式开始并向上工作。

然后在视口超过一定宽度（在这种情况下为580px）时对您的CSS样式进行小的更改。

＆＃13;

html {
  height: 100%
}
body {
  margin: 0 auto;
  height: 100%
}
ul {
  margin: 0px;
  padding: 0px;
  color: #2A2829;
  list-style-type: none;
  text-align: center;
  background-color: pink;
}
@media (min-width: 580px) {
  ul {
    float: left;
    width: 10%;
    height: 100%;
  }
}
ul li a {
  display: block;
  padding: 8px 20px;
  text-decoration: none;
}
ul li a:hover {
  background-color: black;
  color: pink;
}
.body {
  color: pink;
  text-align: center;
  background-color: black;
}
@media (min-width: 580px) {
  .body {
    height: 100%;
    float: left;
    width: 90%;
  }
}

＆＃13;

<body>

  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#">PORTFOLIO</a>
    </li>
    <li><a href="#">BUSINESS</a>
    </li>
    <li><a href="#">ABOUT</a>
    </li>
    <li><a href="#">SCHOOL</a>
    </li>
    <li><a href="#">CONTACT</a>
    </li>

    <p>
      Adding space
      <br />to make
      <br />navbar longer
      <br />
    </p>
  </ul>
  <div class="body">
    <div>
      <h1>
      Hello World
      </h1>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
      <p>
        blah blah blah blah blah blah
      </p>
    </div>
  </div>

＆＃13;

小提琴：https://jsfiddle.net/e55xm437/1/

桌面的垂直导航栏是否会折叠到移动设备的全宽水平导航栏？

2 个答案: