?疑惑解答

?疑惑解答

比如手机屏宽375,dpr:1,1rem=font-size=40

当dpr:2时

则设置初始inited-scale:0.5

得到的屏幕宽度Width将是375*2

再运算得到的html的1rem=font-size=80

这样理解有错误吗?????

如果无误那为什么例子  drp=2时,1rem给还是等于40,设置header高度还是2.5rem,而字体则需要*2倍数?



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

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

2回答
好帮手慕久久 2020-06-29 09:34:50

同学你好,因为系数是18.75,当屏幕不进行缩放时,按照如下公式计算得到的就是1rem=20px:

http://img1.sycdn.imooc.com//climg/5ef9451b093a7c3a12520366.jpg

其中viewWidth宽度为375,375/18.75=20,如下:

http://img1.sycdn.imooc.com//climg/5ef9452109be2dd509990501.jpg

当设置缩放比为0.5时,视口宽变成750px,1rem=40px,如下:

http://img1.sycdn.imooc.com//climg/5ef9452709591cd810740564.jpg

祝学习愉快!

好帮手慕久久 2020-06-28 19:19:49

同学你好,理解是对的,具体如下:

在通用适配中,系数设置的是18.75,当dpr=2时,如果不对视口进行缩放,1rem等于20px:

http://img1.sycdn.imooc.com//climg/5ef87c890954ec8011030210.jpg

当视口缩放时,1rem就等于40px:

http://img1.sycdn.imooc.com//climg/5ef87c920965d8b007770298.jpg

字体之所以设置成24px,是因为字体的fontsize没有使用rem作为单位。

当视口的inited-scale为0.5时,页面的宽度会变成750px(放大2倍),那么字体如果还设置成12px,就会比较小,所以需要对应将字体放大二倍。

而header的实际高度其实也是放大二倍的,因为1rem=40px,不再是1rem=20px。

虽然元素对应放大了,但是由于页面的缩放比inited-scale为0.5,二者相互作用的结果就是页面整体看上去没有变化。

同学试着理解一下。

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

  • 提问者 可好 #1
    当dpr=2时,如果不对视口进行缩放,1rem等于20px:为何?不应该是屏幕宽度375/系数吗? 当视口缩放时,1rem就等于屏幕宽度375*2/系数等于80吗?为何是40
    2020-06-28 19:31:31
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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