返回介绍

单位转换

发布于 2023-10-15 21:39:32 字数 2677 浏览 0 评论 0 收藏 0

rem(value)

value 转换成单位为 rem 的值。

value 支持以 pxrem 为单位的数值。默认单位为 px

相关的全局配置

  • $-base-font-size
// 当基础字体大小为 16px 时:
.box
    font-size: rem(20)
    // => font-size: 1.25rem;
    font-size: rem(14px)
    // => font-size: 0.875rem;
    font-size: rem(2rem)
    // => font-size: 2rem;

px(value)

value 转换成单位为 px 的值。

value 支持以 rempx 为单位的数值。默认单位为 px

相关的全局配置

  • $-base-font-size
.box
    width: px(1rem)
    // => width: 16px;
    width: px(1.5rem)
    // => width: 24px;
    width: px(20)
    // => width: 20px;

em(value, upper-value)

根据继承自上级元素字体大小,将 value 转换成单位为 em 的值。

value 支持以 rempx 为单位的数值。默认单位为 px
upper-value 是手动传入的继承自上级元素的字体大小(默认值:$-base-font-size)。

相关的全局配置

  • $-base-font-size
.box
    foo: em(20)
    // => foo: 1.25em;
    foo: em(16, 10)
    // => foo: 1.6em;
    foo: em(1rem, 10)
    // => foo: 1.6em;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文