根据设计图尺寸自动计算 rem—px2rem

scss 函数的应用点

  • @function 和@return 是定义 scss 函数，用法看起来和 JS 函数差不多
  • #{}代表插值，可以在#{}里计算 scss 变量

px2rem 函数代码

1
2
3
4
5
6
7
8
9
10
11
12
// $px 设计图上元件的尺寸
// $design-width  设计图尺寸
// $block  视口宽度被html的font-size切分的块数
$design-width: 375;
$blocks: 10;
@function px2rem($px) {
  @return #{$px / $design-width * $block}rem;
}

html {
  font-size: 10vw;
}

理解计算逻辑

1
2
3
4
5
6
7
计算出设计图上元件的宽度相对于设计图尺寸的宽度比值： $px / $design-width

假设设计图尺寸==视口宽度：假设设计图为375px 视口为100vw 那么让375px == 100vw 然后通过rem单位去实现这个换算↓↓↓

html的font-size把页面切分：如果font-size是10vw，相当于把页面切分成10块，$design-width / 10 == 10vw

$px / $design-width * $block 就得出了转换为rem之后的值