麻烦老师解答一下

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示
一个盒子100*100px 在dpr为2的屏幕下根据rem适配后无论怎么缩放结果都是横跨200*200物理像素点
假如在dpr为2的屏幕下 1rem为375/10=37.5px 盒子的宽度为2.667*2.667rem 在dpr为2的屏幕下
100px*100px横跨200*200个物理像素点但在标准屏幕750px 即dpr为1 此时1rem为750/10 此时盒子2.667*2.667rem换算之后就是 200px*200px
虽然大家都是横跨200*200个物理像素点但是在屏幕尺寸相同的情况下标准屏幕的单位像素点更大，高清屏幕的单位像素点更小，高清屏的200*200物理像素明显要比标准屏幕的要小啊，所以这样怎么达到在不同手机屏幕下看到的100*100px的盒子是相同大小的？？？
感觉老师的适配方案里的font-size要乘上dpr才合理吧？？？

大白前端 2020-11-02

源自：移动端屏幕适配 3-2 通用适配实现

收起

3回答

好帮手慕久久回答被采纳获得+3积分 2020-11-03 11:36:44

同学你好，老师之前没明白同学表达的意思，这样理解是对的，很棒！

祝学习愉快！

收起回答

好帮手慕久久 2020-11-03 09:32:46

同学你好，红色框中的理解不对，绿色框中的理解是对的，很棒：

同一个元素，在iphone6这样的高清屏下是200*200px的，但是在同尺寸的标清屏下尺寸是100*100px的，所以是实现了适配的。

祝学习愉快！

收起回答

提问者大白前端 #1

老师其实红色框框的没有错，750px的设计稿下100*100的盒子，在iPhone6缩放视口变为750px 那么此时1rem是750/10为75px 盒子大小为1.33*1.33rem 此时1px横跨1物理像素，100*100px也就是横跨100*100物理像素，不缩放的话视口为375px 1rem为375/10为37.5px 盒子1.33*1.33rem换算为50*50px 此时1px横跨的是2物理像素，所以50*50px的盒子此时横跨的是100*100物理像素，所以无论怎么缩放视口，盒子横跨的物理像素始终不变，因为盒子的大小设置的是rem，1rem会根据视口的变化来变化，所以红色框框的内容想表达的是这个意思

2020-11-03 11:06:04

好帮手慕久久 2020-11-02 19:00:14

同学你好，理解的不对，具体如下：

如果设计稿是750px的，元素在设计稿上的尺寸是200*200，当考虑dpr时，在dpr=2的屏幕上，html的宽度是750px（该节的通用适配方案，会根据dpr的值，调整html的宽度），此时1rem=75px，不是37.5，元素计算后的rem值是2.667rem（200/75=2.667，这个值计算之后，就保持不变），如下：

此时元素和设计稿上一样，是200*200的。
当不考虑dpr时，我们的适配代码，会计算得到html的fontsize是37.5px，即页面宽是375px，1rem=37.5，此时元素的rem值还是2.667rem，元素的尺寸计算后是100*100，不再是200*200：

即，考虑dpr时，元素是200*200，此时页面是750px宽的；当不考虑dpr时，元素是100*100的，此时页面是375px宽的，元素会跟随页面进行等比例缩放，因此元素相对于不同的html页面，看起来一样大，所以不用乘上dpr。

祝学习愉快！

收起回答

提问者大白前端 #1

其实老师我是刚刚搞错了，在设计稿为750px的盒子为200px*200px ，因为 iPhone6是高清屏幕750物理像素，在iPhone6中缩放视口后 1rem=75px 也就是2.666rem，为200px*200px，放在标清屏中视口为375px，所以说1rem=375/10为37.5px 所以在标清屏幕中是100*100px，在不缩放dpr为2的屏幕下视口是375也就是1rem为37.5px 2.666m是100*100px，也就是200*200物理像素，其实也就适配了在不同分辨率屏幕。在标清屏幕的单位物理像素点比较大，高清屏幕下的单位物理像素点较小，所以标清屏幕100*100px对应的100*100物理像素点相当于高清屏幕下的200*200物理像素。所以也就适配了不同分辨率的屏幕下盒子的大小呈现效果一样。老师我是这个意思

2020-11-02 20:04:00
提问者大白前端 #2

其实老师我是刚刚搞错了，在设计稿为750px的盒子为200px*200px ，因为 iPhone6是高清屏幕750物理像素，在iPhone6中缩放视口后 1rem=75px 也就是2.666rem，为200px*200px，如果在同等尺寸的标清屏幕那应该是350物理像素，放在标清屏中视口为375px，所以说1rem=375/10为37.5px 所以在标清屏幕中是100*100px，在不缩放dpr为2的屏幕下视口是375也就是1rem为37.5px 2.666m是100*100px，也就是200*200物理像素，其实也就适配了在不同分辨率屏幕。在标清屏幕的单位物理像素点比较大，高清屏幕下的单位物理像素点较小，所以标清屏幕100*100px对应的100*100物理像素点相当于高清屏幕下的200*200物理像素。所以也就适配了不同分辨率的屏幕下盒子的大小呈现效果一样。老师我是这个意思

2020-11-02 20:05:39
提问者大白前端 #3

在高清屏幕下盒子对应的物理像素点始终不变，因为设置的是rem rem会根据视口的大小来改变，所以就是盒子始终横跨的物理像素点始终不变。这句话没错吧

2020-11-02 20:18:54