屏幕适配

2023-02-22 01:23:02html-css011

屏幕适配,第1张

在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的小数问题

1.position:absolute+transform:translate(-50%,-50%)

2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)

3.flex

4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中

5.display:table-cellvertical-align:middletext-align:center

6.calc函数计算实现

1. DOM结构：元素不会渲染

2. 事件监听：不能监听DOM事件