关于rpx的理解

关于rpx的理解

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

老师您好,这节课中13:23这里老师说设置字体应该用px不然不同机型下文字的大小会发生改变,我觉得这里是不是讲错了,或者是我理解错了,因为我在做移动端美团外卖作业中用的是rem,如果用px字体反而会变小。

从之前的理解中pt是我们的视觉所看到的单位,再iPhone6下1px才等于0.5pt,那也就是dpr为2对不对,举个例子,如果我在dpr为1的标准下用了font-size: 16px的设置,那我我在dpr为2的屏幕下看到的文字效果只有8pt,实际上是缩小了,因此在编写的时候应该写32rpx,这样的话才适用呀

正在回答

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

2回答

同学你好,问题解答如下:

1. 这里没有讲错,视频中的项目,老师设置字体大小时使用的是rpx,它在不同的设备下会进行缩放,rpx和px的对应关系如下:

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

当设置字体是20rpx时,在iphone5下,实际的字体大小会是8.4px,此时字体会因为太小看不清,所以建议大家使用px作为单位。

而在移动端下,如果字体大小使用px作为单位,当缩放比为1时,字体不会变小,如下:

http://img1.sycdn.imooc.com//climg/5ed38a0a09bd5ac212880299.jpghttp://img1.sycdn.imooc.com//climg/5ed38a1109b943b115170227.jpg

当缩放比为0.5时,px作为单位才会变小,如下:

http://img1.sycdn.imooc.com//climg/5ed38a1a0971a3e109370236.jpghttp://img1.sycdn.imooc.com//climg/5ed38a1f09a1dc1a17770384.jpg

因为此时页面是被缩小了两倍,所以看起来就小了,该点同学的理解是正确的。

2. 在移动端做适配时,在dpr为2时,如果此时页面是缩小0.5倍的,的确需要将尺寸放大2倍。但是小程序和移动端不同,小程序内部已经做好了适配,它有自己的适配逻辑,在iphone6下,设计稿是750*1334,设计稿上的1px就对应1rpx,同学只要遵守它的规则,按照这个比例关系设置元素尺寸即可,对于该点同学理解的也正确,很棒。

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

提问者 WittChen 2020-05-31 17:22:09

老师您好,这个问题我算是想通了

一、我把css像素与视口大小相关,因为本课程中视口大小都等于手机屏幕大小,因此字体设置成px是永远不会变大或者缩小的,缩放成0.5,视口会变大一倍,那么视觉效果就会变小。

二、我把rpx想得过于简单了,单单理解为和dpr有关,其实也跟屏幕大小有关,就相当于之前美团外卖算的rem基准值一样,只是这个是小程序自己的一套逻辑,我们得遵守,所以在不同屏幕下,这个rpx实际换算成px值也不一样

综上所述,像老师后面讲的,用px还是用rpx取决于当前的业务需求,没有绝对的用哪个


老师我理解的对吗,有不对的请指出

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

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

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

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

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

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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