使用通用适配方案,是否高dpr手机就无法体现出高分辨率的优势了?

使用通用适配方案,是否高dpr手机就无法体现出高分辨率的优势了?

如果使用通用适配方案,是不是每个CSS的1px都是用一个物理像素来实现的?也就是说,无论手机的分辨率有多高,页面的清晰度都是一样的,不会因为手机分辨率高而更清晰?

如果在网页的代码里,没有使用过 px这个单位,而全部只使用rem,那么,使用简单适配方案就可以了?这样就可以确保手机的高分辨率有效?但是,由于一些属性,使用了px这个单位,因此,为了能够让以px为单位的一些属性在相同屏幕大小但是dpr不同的手机上显示效果基本一致,才需要使用通用适配方案?

我以上的理解对吗?


但是,我试了,无论border还是 font-size,都可以使用rem啊,没必要非使用px啊,我不知道什么属性不能使用rem。如果都可以使用rem的话,如果我上面理解的是对的,那么,不就都可以随着显示屏的大小进行缩放了吗?这样,只考虑可视的viewport,也就是device-width就可以了,而无需考虑dpr,这样即可以确保高dpr的手机显示的清晰度更高,同时方案实现又简单,我的想法不对吗?



在这里输入代码,可通过选择【代码语言】突出显示

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

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

1回答
好帮手慕慕子 2020-12-16 13:39:58

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

  1. 手机的分辨率是固定的,通用适配方案主要是通过dpr来计算页面的缩放比,不会影响到手机的分辨率,更不会影响到页面的清晰度。。

  2. 理解的有误差。

    手机的分辨率,这个是设备在出厂前就设置好的,我们无法更改。通用适配方案,只是通过缩放,从视觉上看1px占了一个物理像素。也就是缩放的是元素,而设备的分辨率不会改变,看到的清晰度也不会改变。

    同学不用纠结到底使用什么单位,一般所有的属性都可以使用rem, 但是边框一般会使用px,通用适配方案不会影响到手机的分辨率和页面清晰度,主要是为了解决1px边框的问题因为1px问题主要是指设计稿上的1px,与页面上的1px视觉效果不对应(针对iphone这种高清屏),页面上的1px看着会厚重一些(粗一点)。

    实际开发中,设计师要的是1物理像素的边框,而设计稿都是750的,即对应着视口为750px的机型(iphone6),所以当视口是750px时,页面上的1px才对应着设计稿上的1px,如果视口是375px的,那么我们在页面上设置的1px实际对应着设计稿上的2px。所以为了还原设计稿上的1px,我们在适配时,通过dpr调整initial-scale参数的值,从而让页面和设计稿一样宽,达到UI设计师的要求

祝学习愉快~

  • 老师你好,请问1个物理像素的实际大小在不同手机会不同吗?

    比如说,iPhone6出厂时,屏幕尺寸为4.7英寸,分辨率为7501334 ,即一共有750x 1334=1000500个物理像素,现在生产一个新设备,屏幕尺寸也为4.7英寸,但是分辨率更高,在4.7英寸的屏幕里容纳下了更多的物理像素,所以每个物理像素的实际大小都比iPhone6的物理像素小了

    2022-03-06 11:17:09
  • 同学你好,理解是可以的,1物理像素的实际大小在不同的手机中会不同,祝学习愉快~


    2022-03-06 11:42:28
  • 1物理像素的实际大小在不同的手机中会不同,

    假设a、b设备尺寸相同,a设备1个物理像素大小为x,b设备的物理像素点总数是a设备的两倍,所以b设备的1个物理像素大小就是x/2,a设备中的1px用1个物理像素来表示,b设备的1px需要用2个物理像素来表示,现在a设备的1个物理像素的实际大小是等于2个b设备的物理像素实际大小,看起来是一样大小的,既然这个1px在a设备和b设备是一样大的,那为什么b设备要设置

    initial-scale=0.5 去缩小页面让b设备的1px用1个物理像素来表示呢?

    2022-03-06 18:17:49
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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