做法一：僅使用vw作為CSS單位
sass編譯
//iPhone 6尺寸作為設(shè)計稿基準
$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è)計圖為 750 * xxx
比如按鈕是600px設(shè)計圖鸯绿，但在chrome的iphone6 375px的環(huán)境中 ===>>> 2:1
做法二：搭配vw和rem系草，布局更優(yōu)化秒咐、
于是，聯(lián)想到不如結(jié)合rem單位來實現(xiàn)布局？rem 彈性布局的核心在于動態(tài)改變根元素大小璧针，那么我們可以通過：
給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實現(xiàn)動態(tài)改變其大小。
限制根元素字體大小的最大最小值葵擎，配合 body 加上最大寬度和最小寬度
// rem 單位換算：定為 50px
$vm_fontsize: 50; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同時，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制半哟，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}
