在响应式开发中,px单位明显不适用,最好使用rem/em/vw单位更合适,一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦,这里我的站长站推荐利用Sass或less自动化将全部px单位快速的转换成rem/em/vw单位方法。
一、Sass方法
因为Sass拥有@function函数的方法 ,可以接收参数并返回值,less不带这个功能,推荐大家在处理px单位转换rem/em/vw单位的时候,建议优先使用Sass方法。
示例:
在父元素字体大小为 12px 的容器内绘制图形交互。
@function pxToEm ($px) { @return ($px/12) + em; } # Sass .box { width: pxToEm(36); } # CSS .box { width: 3em; }
二、Less方法
Less 的函数全是内置的并不能自定义,所以只能迁就一下使用混合(Mixins)来实现转换逻辑的复用
示例:
将宽度为 375px 的 UI 设计稿转换成使用单位 vw 来适配移动端的网页。
.pxToVW (@px, @attr: width) { @vw: (@px / 375) * 100; @{attr}: ~"@{vw}vw"; } # Less .box { .pxToVW(75); .pxToVW(150, height); } # CSS .box { width: 20vw; height: 40vw; }