时间戳

首页 > 解决方案 > 有没有办法让一栏网站布局响应？

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

问题描述

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

我试过但找不到方法。

#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>

标签： htmlcssresponsive-designsingle-page-application

解决方案

尝试使用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>

推荐阅读