vw 前端_Vw / Vh 更好的做前端适配

做法一：仅使用vw作为CSS单位

sass编译

//iPhone 6尺寸作为设计稿基准

$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); // 内间距

&_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

网页比例： px : vw() = 1 : 1的写法

设计图为 750 * xxx

比如按钮是600px设计图，但在chrome的iphone6 375px的环境中 ===>>> 2:1

做法二：搭配vw和rem，布局更优化、

于是，联想到不如结合rem单位来实现布局？rem 弹性布局的核心在于动态改变根元素大小，那么我们可以通过：

给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。

限制根元素字体大小的最大最小值，配合 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;

}