屏幕适配

Posted 2023-04-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了屏幕适配相关的知识，希望对你有一定的参考价值。

参考技术A

在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。

首先：我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。Retina屏一般在苹果公司的产品上用的比较多，诸如MacBook、iPad、iPhone等

物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个CSS像素对应的却是4个物理像素

设备独立像素是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。

设备像素比简称为dpr，物理像素与设备独立像素的比例。

当这个比率为1:1时，使用1个设备像素显示1个css像素。当这个比率为2:1=2时，使用4(2 2)个设备像素显示1个css像素。当这个比率为3:1=3，使用9(3 3)个设备像素显示1个css像素。
这里要注意，dpr=2,并不是物理像素是设备独立像素的2倍，而是用4个物理像素去表示1个设备逻辑像素

应该说1个设备独立像素是1个物理像素的4倍！！！！！，因为你4个网物理像素才代表我1个设备独立像素

dpr只代表一个数字比例，不是倍数关系。

CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。关于这点，以后的1px细线问题部分还会讲到。

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。

事实上 rem是把屏幕等分成指定的份数，以20份为例，每份为 1rem ， 1rem 对应的大小就是 rem基准值，rem做的就是把 rem基准值给<html>的 font-size ，所以如果设备的物理像素宽为 640px ，分成20份，那么 1rem=640px/20=32px , <html>的 font-size为32px 。

当然，你也可以分成30份，40份，60份等等，这个看自己的喜好了

在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的原始的px值(即你量的大小) 除以 rem基准值即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px* ，那么换算过来就是：

这样我们就可以用rem来代替像素px了，而且在所有的移动端都是自适应的

这个方法目前是比较好的适配方法，只是rem在计算时很麻烦，有很多小数，这个时候大家可以试一下用less解决rem的小数问题

smallestWidth 限定符适配 : 屏幕适配-插件：ScreenMatch

参考：

Android 屏幕适配神器ScreenMatch

Android屏幕适配(一)：ScreenMatch官方屏幕适配方案

Android屏幕适配全攻略(最权威的官方适配指导)

Carson带你学Android：屏幕适配-最全面的解决方案

切图应该放哪个 drawable 文件夹下

获取设备smallestWidthDP

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int heightPixels = dm.heightPixels;
int widthPixels = dm.widthPixels;
float density = dm.density;
float heightDP = heightPixels / density;
float widthDP = widthPixels / density;
float smallestWidthDP = Math.min(widthDP, heightDP);//411.42856

为什么选择 `smallestWidth 限定符适配`而不用`屏幕分辨率限定符适配`？

屏幕分辨率限定符适配是根据屏幕分辨率的，Android 设备分辨率一大堆，而且还要考虑虚拟键盘，这样就需要大量的 dimens.xml 文件。因为无论手机屏幕的像素多少，密度多少，90% 的手机的最小宽度都为 360dp，所以采用smallestWidth 限定符适配只需要少量 dimens.xml 文件即可。
屏幕分辨率限定符适配采用的是 px 单位，而 smallestWidth 限定符适配采用的单位是 dp 和sp，dp 和 sp 是 google 推荐使用的计量单位。又由于很多应用要求字体大小随系统改变，所以字体单位使用 sp 也更灵活。
屏幕分辨率限定符适配需要设备分辨率与 values-xx 文件夹完全匹配才能达到适配，而 smallestWidth 限定符适配寻找 dimens.xml 文件的原理是从大往小找，例如设备的最小宽度为 360dp，就会先去找 values-360dp，发现没有则会向下找 values-320dp，如果还是没有才找默认的 values 下的 demens.xml 文件，所以即使没有完全匹配也能达到不错的适配效果。