...因為你百分比的ul沒有寫width:100%;width默認auto了.
而且本身你的容器內(nèi)的元素總寬就超出了100vw,你的(30+3)*3+3 > 100
vw單位下,它是基于整個文檔寬度計算,是恒定的值.
而百分比下的ul的3%實際像素值(基于body總寬)是不等于li的3%右邊距的(基于ul的總寬,少了3%的內(nèi)邊距)

根本不是對照試驗。

/*ul{
        padding: 3% 0 0 3%;
        // width: 100%; 這個沒加
        // overflow: hidden;

    }
    ul li{
        width: 30%;
        padding: 30% 0 0 0;
        background-color: orange;
        border-radius: 10px;
        float: left;
        margin-right: 3%;
        margin-bottom: 3%;
    }*/

    ul{
        padding: 3vw 0 0 3vw;
        width: 100vw;
        overflow: hidden;
    }
    ul li{
        width: 30vw;
        height: 30vw;
        background-color: orange;
        border-radius: 1vw;
        float: left;
        margin-right: 3vw;
        margin-bottom: 3vw;
    }