CSS中，我們可以使用百分比（%）來表示元素的寬度或高度，從而實現(xiàn)按比例切換導(dǎo)航的效果，以下是一個簡單的示例：

HTML結(jié)構(gòu)：

<div class="nav">
    <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">產(chǎn)品</a></li>
        <li><a href="#">服務(wù)</a></li>
        <li><a href="#">關(guān)于我們</a></li>
    </ul>
</div>

CSS樣式：

.nav {
    width: 100%;
    height: 50px;
    background-color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.nav li {
    list-style: none;
    margin-right: 10px;
}
.nav li a {
    color: #fff;
    text-decoration: none;
}

在這個示例中，我們使用了flex布局來使導(dǎo)航項水平排列，每個導(dǎo)航項的寬度設(shè)置為100%，這樣它們就可以按照比例切換了，這只是一個簡單的示例，實際使用時可能需要根據(jù)具體需求進(jìn)行調(diào)整，但基本的原理是相通的：通過百分比（%）來表示元素的寬度或高度，從而實現(xiàn)按比例切換導(dǎo)航的效果。