多媒体查询多端适配
- 设计图/内容宽=适配比例vw
- 适配比例/设计图宽=适配大小
- 设计图大小*适配大小=展示样式
- 后续样式单位按照设计图大小正常写,用变量去计算
<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;
}