隨著移動設備的普及，網頁也需要適應不同尺寸的屏幕。而CSS響應式設計是一種眾所周知的解決方法，其中側導航是一個常見的UI組件。本文將介紹使用CSS實現一個響應式側導航的方法。

// HTML代碼
<div class="side-nav">
<a href="#">首頁</a>
<a href="#">博客</a>
<a href="#">工具</a>
<a href="#">關于我們</a>
</div>
// CSS代碼
@media screen and (max-width: 768px) {
.side-nav {
width: 100%;
position: fixed;
z-index: 999;
background-color: #fff;
height: 100%;
top: 0;
left: -100%;
transition: all 0.3s ease-in;
}
.side-nav.show {
left: 0;
}
.side-nav a {
display: block;
text-align: center;
padding: 20px;
border-bottom: 1px solid #f2f2f2;
}
}
@media screen and (min-width: 768px) {
.side-nav {
width: 250px;
position: relative;
background-color: #f5f5f5;
height: 100%;
float: left;
}
.side-nav a {
display: block;
text-align: left;
padding: 10px 20px;
border-bottom: 1px solid #e5e5e5;
}
}

代碼中，我們使用@media查詢來對不同的屏幕尺寸應用不同的CSS樣式。當屏幕寬度小于等于768px時，我們將側導航的寬度設置為100%并固定在左側，同時在左移動時應用過渡效果。同時，當側導航處于顯示狀態時，添加.show類即可。大于768px時，則將側導航的寬度設置為固定值，并左浮動。同時，為a標簽添加樣式，使其在移動設備上點擊更加友好。

通過以上的CSS代碼，我們不僅可以實現一個適應不同屏幕的響應式側導航，并且還可以提供更好的用戶體驗，方便用戶在移動端訪問網站。