请教一下移动端、pc自适应的问题

Question

$vw_fontsize_m: 75;
$vw_design_m: 750;

$vw_fontsize_pc: 136.6;
$vw_design_pc: 1366;

@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}

html{
    @media screen and (max-width:750px) {
        font-size: ($vw_fontsize_m / ($vw_design_m)/2) * 100vw;
    }
    
    @media screen and (max-width:1366px) {
        font-size: ($vw_fontsize_pc / ($vw_design_pc)) * 100vw;
    }
}

请教一下，rem（）这个函数怎么动态改变$vw_fontsize,或则做这种需要兼容pc/移动自适应有什么好的办法吗

Answer 1

张轩 2021-06-08 12:03:57

同学你好 由于这个话题比较大 我特意找了两篇文章，供你参考。可以看下，对我也有些提高和帮助。

https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/

https://segmentfault.com/a/1190000021929510

Answer 2

张轩 2021-06-07 12:13:15

同学你好 请问一下在 rem 这个函数中 

$px / $vw_fontsize 有怎样的含义？最后想达到怎样的效果呢？由于没有注释比较难看懂，
希望再解释的清楚一点

• 提问者 临渊而立 #1

  就是要做自适应页面，780为断点，大于780是一套自适应的公式，小于780的是另外一套，rem函数就是把px转成vw，目前做法是定义了两个rem函数，一个remmobile和rempc，老师关于这块有什么更好的处理方式吗