根據屏幕寬度將側導航移動到右側

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; 
    /*...*/ 
    } 
}