Question

我正在尝试在移动设备上使用水平导航栏，在更宽的视口上使用垂直导航栏。这是一栏式的网站布局。

我已经尝试过，但是找不到方法。

#main-nav {
  margin-top: 105px;
  margin-left: 300px
}

#main-nav a {
  font-weight: bolder;
  display: block;
  float: left;
  text-align: center;
  width: 95px;
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  color: #a0a0a0;
  text-transform: uppercase;
  font-size: 0.7em;
}

<div id="main-nav">
  <a href="#">home</a>
  <a href="#">about</a>
  <a href="#">contact</a>
  <a href="#">blog</a>
</div>

Answer 1

尝试使用media queries来处理定位，如果可以使用display: flex，也更好。

这是我完成的示例代码。媒体查询设置为选项卡设备的最大宽度。随时将其更改为移动尺寸并进行测试。希望对您有所帮助。

.main-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.main-nav a {
  font-weight: bolder;
  width: 95px;
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  color: #a0a0a0;
  text-transform: uppercase;
  font-size: 0.7em;
}

@media (max-width: 767px)
/* Set max-width in preference to your device. Currently set to tab size so if the page is viewed from a tab screen and below the menu will be shown vertically */

  {
  .main-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}

<div class="main-nav">
  <a href="#">home</a>
  <a href="#">about</a>
  <a href="#">contact</a>
  <a href="#">blog</a>
</div>

有没有一种方法可以使一栏式网站的布局响应式？

1 个答案: