根据屏幕宽度向右移动侧面导航

Question

我有一个桌面版网站的侧边导航。这是 CSS：

.sidenav {
  position: fixed;
  /*width set by col2 [16.66%]*/
  height: 100%;
  left: 0;
  /*top set by $*/
  background-color: #2e2e2e;
}

移动网站侧边导航的 CSS：

.sidenav {
  width: 0;
  height: 100%;
  position: fixed;
  right: 0;
  z-index: 1;
  background-color: #2e2e2e;
  overflow-x: hidden;
  -webkit-transition: 1s;
  transition: 1s;
  padding-top: 15px;
}

正如您从CSS中看到的那样，我正在尝试将侧边导航放在移动设备窗口的右侧。然而，它停留在左侧。我错过了什么？我有重复的设置，因为我正在尝试从桌面版本重置它们。我认为只需在@media中添加right:0即可使其成为页面的整个宽度。

Answer 1

只需为移动侧边导航样式添加此规则：

.sidenav {
  left:auto;
}

关键是浏览器在您的版本中有两个规则 - left: 0 和 right: 0 ，所以，他听第一条规则并站在左边。

Answer 2

您需要

取消设置 left 属性才能应用right：

@media (/*...*/) {
  .sidenav {
    left: auto;
    right: 0;
    /*...*/
  }
}