前言

常见的vw在设计图尺寸不同时往往需要修改基准值来达到还原设计的效果,当前需要在不同设计图尺寸下使用rem作为单位，使页面达到自适应的效果。

目标

同时拥有1920px的设计图和750px的设计图时，在1920px设计图下 1vw = 19.2px,而在750p下1vw = 7.5px，现在需要使用rem作为单位使页面单位在不同的设计图下可以实现1rem = 100px的场景。

实现过程

• rem基于root的font-size,所以核心思想还是改变font-size
• 在不同的设计尺寸下用vw当作font-size的单位

代码

@media screen and (max-width:750px){ 
font-size: 13.33333333vw; // 100px/750px 
}

@media screen and (min-width:750px) and (max-width:1920px){ 
font-size: 5.208333333vw; // 100px/1920px
} 

@media screen and (min-width:1920px){ 
font-size: 100px; // 100px 
}