前端 SCSS rem 响应式变化 方法

SCSS 函数 px2rem 详解

这个 SCSS 函数用于将像素（px）转换为相对单位（rem），非常适合用于响应式设计。以下是对每一部分的详细解释：

函数定义

@function px2rem($px, $base-font-size: $baseDevice / $device * $baseFontSize) {

• @function：定义一个 SCSS 函数。
• px2rem：函数名称，用于表示将像素转换为 rem。
• $px：输入参数，表示要转换的像素值。
• $base-font-size：默认参数，计算基准字体大小。它的值为设计稿宽度与设备宽度的比例乘以基础字体大小。

单位检查

@if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
}

• unitless($px)：检查 $px 是否没有单位。如果没有单位，表示用户可能传入了一个纯数字，函数会发出警告。
• @warn：发出警告，提示用户假设该值为像素。
• @return px2rem($px + 0px);：尝试将没有单位的值转换为像素。这里的 + 0px 是为了确保传入的是像素单位。这一行可能会导致递归调用，理论上应该避免。

处理 rem 单位

@else if (unit($px) == rem) {
    @return $px;
}

• unit($px) == rem：检查 $px 是否已经是 rem 单位。如果是，直接返回该值，不进行转换。

像素转换

@return ($px / $base-font-size) * 1rem;

• 计算公式：将像素值 $px 除以基准字体大小 $base-font-size，然后乘以 1rem。这个公式的目的是将像素转换为相应的 rem 值。
• 返回值：最终返回转换后的 rem 值。

示例

假设 $baseDevice 为 750，$device 为 375，$baseFontSize 为 100px。若要将 20px 转换为 rem：

1. 计算基准字体大小：

2. 调用 px2rem(20)：

完整代码

// 默认移动端设计稿宽度
$baseDevice: 750;
// 前端移动端默认正常显示尺寸，默认为设计稿的一半
$device: $baseDevice / 2;
// 默认html font-size
$baseFontSize: 100px;

@function px2rem($px, $base-font-size: $baseDevice / $device * $baseFontSize) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px)==rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

调用

// 示例
padding: px2rem(15px);
height: px2rem(100px);
padding: 0 px2rem(30px);
width: px2rem(530px);

总结

• 功能：px2rem 函数用于将像素值转换为 rem，支持单位检查和默认字体大小计算。
• 灵活性：通过动态计算基准字体大小，确保在不同设备和设计稿下具有良好的适应性。
• 警告机制：提供警告机制，提醒用户输入的单位，增强用户体验。