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

来源：4-12 【学习任务】完成 Alert 组件

临渊而立

2021-06-05

$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/移动自适应有什么好的办法吗

写回答

2回答

张轩

2021-06-08

已采纳

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

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

https://segmentfault.com/a/1190000021929510

张轩

2021-06-07

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

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

临渊而立

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

2021-06-07

共1条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

查看课程

相似问题

ipad或者苹果手机页面崩掉

回答 2

关于react的动画

回答 2

为什么withloader 图片跟随着图标一直加载

回答 2

关于打包上传后的安装问题

回答 2

在storybook和App.tsx中都出现的一个问题

回答 1

打开慕课网App查看更多内容