html - 有没有办法让一栏网站布局响应？

Question

我正在尝试在移动设备上制作水平导航栏，在更宽的视口(viewport)上制作垂直导航栏。这是一个单栏网站布局。

我试过了，但找不到方法。

#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

尝试使用媒体查询 来处理定位，如果可以使用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>