老师这个公式如何推到出来的,

老师这个公式如何推到出来的,

docEl.style.fontSize=viewWidth/375*20+'px'

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
qq_慕妹2226526 2020-04-12 20:41:05

    用我当初学按键精灵做手机端全分辨率点击思路给你说. 假设你设计稿固定宽度为400px,里面的字体在400px下为20px大小. 现在假设我想放大屏幕的同时,字体等比例放大(等同于大号的设备).

   这个时候就需要算出来比例值. 比如放大到800px宽,这个时候很明显的800/400=2倍,这就是比例值,

同理在400下字体为20px, 那么用这 20px  * 比例值2 =40px.   无论设备宽度是多少都可以算出比例值,

而这个比例值取决于你设计稿的预设值.预设800,缩小到400比例值就是 400/800=0.5  

    回到课程中,rem是根据html来计算的.那么把其他需要根据html改变而改变的值设置为rem,后面我们只需要获取当前屏幕大小,除以设计稿预设大小,算出来比例值.再去乘以 html里面的预设值.就能间接的改变rem里面的值了.因为上面提到了,rem是依据html来换算的,html改变,那么rem就会改变


好帮手慕夭夭 2020-04-07 15:13:04

同学你好,这个公式其实并不是固定的,而是为了方便计算:

大部分设计稿以iPhone6为准,iPhone6的逻辑像素为375px。这里就是用屏幕宽度除以375px,再乘以20,即根元素的字体就是20px。那么此时设置1rem就等于20px,整数比较好计算。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师