做法一：僅使用vw作為CSS單位

sass編譯

//iPhone 6尺寸作為設(shè)計(jì)稿基準(zhǔn)
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 內(nèi)間距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字體大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 寬度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

iphone6 375px
網(wǎng)頁比例： px : vw() = 1 : 1的寫法

設(shè)計(jì)圖為 750 * xxx
比如按鈕是600px設(shè)計(jì)圖，但在chrome的iphone6 375px的環(huán)境中 ===>>> 2:1

做法二：搭配vw和rem，布局更優(yōu)化、

于是，聯(lián)想到不如結(jié)合rem單位來實(shí)現(xiàn)布局？rem 彈性布局的核心在于動(dòng)態(tài)改變根元素大小，那么我們可以通過：

給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實(shí)現(xiàn)動(dòng)態(tài)改變其大小。
限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度

// rem 單位換算：定為 50px 
$vm_fontsize: 50; // iPhone 6尺寸的根元素大小基準(zhǔn)值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同時(shí)，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小寬度限制，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}

文章來源