请问这里的input的字体设置为什么不使用rem为单位呢？以rem为单位不是可以跟着缩放吗？为什么还要根据dpr来分别设置字体？

请问这里的input的字体设置为什么不使用rem为单位呢？以rem为单位不是可以跟着缩放吗？

为什么还要根据dpr来分别设置字体？

什么情况下需要根据dpr来分别设置样式呢？

相关代码：

[data-dpr="2"] body,
[data-dpr="2"] a,
[data-dpr="2"] input {
font-size: 24px;
}
[data-dpr="3"] body,
[data-dpr="3"] a,
[data-dpr="3"] input {
font-size: 36px;
}

若雨灬 2021-09-11

源自：移动端屏幕适配 3-3 通用适配应用--头部header

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2021-09-11 16:46:40

同学你好，解答如下：

1、这里的input可以直接使用rem作为单位。

2、rem只是适配方案中的一种，老师这里演示的写法，也可以称为适配的一种形式，即根据设备的属性，写样式。rem可以让元素在不同的屏幕上，通过缩放，从而保证页面效果正常；而[data-dpr="xxx"] 这种写法，也可以让元素在dpr不同的设备下正常显示；二者都能实现“不同屏幕下，页面正常显示”这个目的。

3、这两种方式可以混用，即可以结合着使用，只要能实现要求就行。当rem无法满足我们的样式要求时，可以考虑使用[data-dpr="xxx"]的形式设置样式。

老师这里只是想给大家拓展一下，使用rem的时候，也可以使用其他方式辅助实现效果。[data-dpr="2"] body这种写法，就是属性选择器一种比较新颖的用法：

https://class.imooc.com/lesson/1611#mid=38851

同学可以回顾一下属性选择器。

祝学习愉快！

下载视频

收起回答

慕沐0341706 #1

老师这里根据dpr设置字体还是没搞懂，

为什么输入框里的字最终会显示缩小？
我理解根据这个js/flexible.js引入的文件适配，dpr是2，2物理像素1CSS像素，字是会显示变大*2，缩放又采用了0.5，CSS像素缩放一半，字体显示出来大小那不是相当于没变吗？怎么会最终缩小呢？
其实也就是js/flexible.js文件不是已经解决了px大小变化适配问题，让它在不同dpx屏幕都不会放大缩小显示吗？
怎么这里又在html文件里得设置 不同dpr下的对应的px了？

搜索

复制

2022-05-19 18:00:56

好帮手慕久久回复慕沐0341706 #2

同学你好，需要注意，视频中讲师字体大小的单位是px，不是rem：
如果是rem，就会像同学说的那样，字体大小不变。
使用px后，如果不利用dpr将屏幕缩放，那么html的宽度是375px，此时input的字体就是“375px下的12px”。使用dpr后，html宽度变成了750px：
此时input的字体就是“750px下的12px”，相比之前，字体看上去就小了。
适配方式并不唯一，讲师这里用到px作为单位，就是想演示，可以利用属性选择器+px实现适配。
建议再看看之前，老师的回复。

2022-05-19 18:29:04
慕沐0341706 回复好帮手慕久久 #3

为什么使用dpr后，html宽度由375px变成了750px，不应该是375/2=187.5px吗？
然后再加上
js/flexible.js文件里
var scale = 1 / dpr；
content = 'width=device-width, initial-scale=' + scale + '；
设置了缩放0.5， dpr2 缩放0.5，2*0.5=1，不是相当于不变大不变小吗？
翻了2小时，参考了很多同学问题的答案，还是翻不过来，实在难懂，iphone6 尺寸的375*667这里到底代表的是物理像素还是css像素，有老师回答说这是css像素，那意思iphone6屏幕显示的css像素宽度一定是375？
又看到有老师说dpr为1的在320视口可以显示320px，但是dpr为2的在320的视口可以显示640px。是对的，那明显375屏幕显示的css像素宽度不一定是375px了，就解释的很乱。。到底谁说的是对的。。众说纷纭的感觉，唉，这个可以用rem就没这些个问题了对吧，不用px就好了。。。
搜索
复制

2022-05-19 20:55:47