移动端 – vw 与 rem 结合使用

前几天的《移动端 – 使用 vw 单位代替 rem 单位》的拓展。

scss 头部

$vw_base: 750px;
@function tovw($px) {
	@return ($px / $vw_base) * 100vw;
}
$vw_fontsize: 75;
@function torem($px) {
	@return ($px / $vw_fontsize )/2px * 1rem;
}
$vw_design: 750;
html {
	font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
	@media screen and (max-width: 320px) {
		font-size: 64px;
	}
	@media screen and (min-width: 540px) {
		font-size: 108px;
	}
}

然后在该使用的地方正常使用 torem() 就可以了。

750 是设计图宽度。