sass px转vw

如今移动端对 vw/vh 的尺寸单位基本兼容,对代码有洁癖的开发者们不想用js去计算rem的值了。

网上有许多有关在 sass 中 px转rem的文章了,今天小编带来一个简单实用的 px转vw的方法

sass方法源码

/*
  750:设计稿宽度
  $px:元素在设计稿上的宽度
*/

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

使用方式

由上图所示,750px的设计稿上有一个375px的元素,通过计算,就是50vw的值啦。这与使用rem和rpx这类单位是一样的。

小编不建议对设计稿上小于5px的元素动态计算,意义不大。特别是1px的线,不能通过该方法计算,因为计算后的结果是小于 1px,在理论上这不是一个合理的值,有些开发者也会写1rpx,这其实也是不对的。

若你仍然喜欢用rem,小编给你rem全套服务,点击下方连接获取:

rem兼容:https://mydarling.gitee.io/resource/author/mobileAdapt.html

作者:黄河爱浪 QQ:1846492969,邮箱:[email protected]

公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

更多精彩文章,请扫下方二维码关注我的公众号

发布了112 篇原创文章 · 获赞 24 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/u013350495/article/details/103494877