多媒体查询多端适配-scss

多媒体查询多端适配

1. 设计图/内容宽=适配比例vw
2. 适配比例/设计图宽=适配大小
3. 设计图大小*适配大小=展示样式
4. 后续样式单位按照设计图大小正常写，用变量去计算

<style lang="scss" scoped>
@use "sass:math";
$flexPrecent: math.div(72.2vw, 1290); 
.radius {
    border-radius: 40 * $flexPrecent ;
  }
</style>

还有一个方案

我们设置了百分之一的宽度后，在写 css 时，就需要利用 scss/less 等 css 处理器来对 css 编译处理。假设给出的设计图为 750 * 1334，其中一个元素宽度为 200 px，根据公式：width: 200 / 750 * 100 = 26.67 rem 在 sass 中，需要设置设计图宽度来做换算：

@use 'sass:math';

$width: 750px;

@function px2rem($px) {
  @return #{math.div($px, $width) * 100}rem;
}