根据屏幕宽度将侧导航移动到右侧

Question

我有我的网站的桌面版本的侧面导航。这里是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看，我试图让的右侧sidenav：

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

针对移动网站侧面导航的CSS手机窗口。但它仍然在左边。我错过了什么？我有重复的设置，因为我试图从桌面版本重置它们。我认为只需在@media中添加right:0就可以使其成为页面的整个宽度。

Answer 1

只需添加这个规则来进行移动sidenav风格：

.sidenav { 
    left:auto; 
} 

的一点是，浏览器必须在两个规则的版本 - left: 0和right: 0，所以，他听第一条规则并站在左边。

Answer 2

您需要取消设置left属性right申请：

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