移动端 – 使用 vw 单位代替 rem 单位

sublime 新建 snippet

	<![CDATA[ tovw(${1:}px); ]]>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	tovw
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->

sass 的头部定义转换函数

@function tovw($px) {
	@return ($px / 750px) * 100vw;
}

750px 是 iPhone6 的标准设计稿宽度

使用的时候

.banner {
	width: tovw(750px);
	height: tovw(340px);
}

生成的 css 文件

.banner {
	width: 100vw;
	height: 45.33333vw;
}

效果图

发表评论

电子邮件地址不会被公开。 必填项已用*标注