css教程

利用Sass/Less快速将px单位转换rem/em/vw单位教程

我的站长站 2023-09-14 人阅读

在响应式开发中,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;
}


相关推荐
  • px转rem
  • 单位转换
  • 在线px转rem单位工具,支持批量代码转换
    在线px转rem单位工具,支持批量代码转换

    工具介绍之前我的站长站分享过一款px单位转换rem单位的在线工具,但是那款工具只支持一个个的px转换rem,无法批量转换,很麻烦。所以我的站长站又找了一款,这款支持批量转换,可以直接把全部CSS代码复制...

    在线工具 21 6个月前
  • 利用Sass/Less快速将px单位转换rem/em/vw单位教程

    在响应式开发中,px单位明显不适用,最好使用rem/em/vw单位更合适,一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦,这里我的站长站推荐利用Sass或Less自动化将全部px单位快速的转换成rem/em/vw单位方法。一、Sass方法因为Sass拥有@function函数的...

    css教程 19 6个月前
  • 网站制作px单位转换rem单位在线工具
    网站制作px单位转换rem单位在线工具

    在制作自适应手机端的时候,PC端的单位用的px单位而手机端我们常常会用到rem单位,靠人工来换算肯定是不行的,这里给大家推荐一个在线px单位转换rem单位工具。在线工具截图使用方法使用很简单,左边填写...

    在线工具 5268 5年前
  • 在线px转rem单位工具,支持批量代码转换
    在线px转rem单位工具,支持批量代码转换

    工具介绍之前我的站长站分享过一款px单位转换rem单位的在线工具,但是那款工具只支持一个个的px转换rem,无法批量转换,很麻烦。所以我的站长站又找了一款,这款支持批量转换,可以直接把全部CSS代码复制...

    在线工具 21 6个月前
  • 利用Sass/Less快速将px单位转换rem/em/vw单位教程

    在响应式开发中,px单位明显不适用,最好使用rem/em/vw单位更合适,一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦,这里我的站长站推荐利用Sass或Less自动化将全部px单位快速的转换成rem/em/vw单位方法。一、Sass方法因为Sass拥有@function函数的...

    css教程 19 6个月前
  • 网站制作px单位转换rem单位在线工具
    网站制作px单位转换rem单位在线工具

    在制作自适应手机端的时候,PC端的单位用的px单位而手机端我们常常会用到rem单位,靠人工来换算肯定是不行的,这里给大家推荐一个在线px单位转换rem单位工具。在线工具截图使用方法使用很简单,左边填写...

    在线工具 5268 5年前
最新更新