这两天我在公司做手机终端的H5页面，第一次开发没有什么经验，完全不懂rem、pt、ppi、dpr这些概念，看了很多博客，总结如下。
不同像素宽度的手机如何自动缩放各个元素？
rem : fontsizeoftherootelement
rem作为单位，单位的大小由其初代祖先的font-size的大小，即html标签的font-size决定。 例如，如果将html的字体大小设置为10px，则1.2rem为12px。 通过在需要使用px的所有位置使用rem，只需更改html的字体大小即可动态调整内部所有元素的大小。
实例
本公司提供宽375pt的设计图。 (pt稍后说明，请暂时理解为px。 我以这个版本为基础写页面。 我把html的字体大小设置为10px，设计图上所有pt的符号除以10，再以rem为单位添加就可以了。 然后，只需在初始化页的函数中添加以下代码，就完成了完美的匹配。
lethtmlfontsize=10 * width/375 ' px '
document.getelementsbytagname (html ) )0).style.fontsize=htmlfontsize
举板栗吧。 这个时候，手机的宽度变成了414pt。 根据公式，html的字体大小动态为11.04px，页面的其他元素也将放大。
PS :
375pt是iphone的6/7/8的宽度。
414pt是iphone6/7/8 plus的宽度。
pt和px是什么关系？
在上面的叙述中，公司出示的设计图的单位是pt，写页面时使用的单位是px，但是两者之间有什么样的联系呢？ 首先，我们将介绍逻辑像素和物理像素以及一些挤出的概念。
逻辑像素pt (点) )
在html css中使用的单位像素px实际上指逻辑像素pt，并且一个逻辑像素可包括多个物理像素(一个、两个或三个)
物理像素px
这个px不是我们的css中使用的px，而是一个个真实的像素点。 是photoshop使用的那个px。
设备图像专家组(DPR ) )。
dpr=物理像素/逻辑像素，iphone 3GS的dpr为1，iphone 4/4s的dpr为2。 其他型号的dpr请参照下表。
PPI(Pixelsperinch ) )。
ppi=像素数(pixel ) /显示器长度或宽度(inch ) )。
第一代iphone手机的像素密度为163ppi，到了iPhone4，像素密度为326PPI(163*2)，开发者第一代的1px (物理像素)和iPhone4上的1px (物理像素)的显示尺寸(物理尺寸)相等因此，iphone开发者提出了以第一代iphone的1像素点的大小为基准，标记为1pt(point )的pt概念。 也就是说，iphone4上的1pt的大小=2px的宽度和高度。
dpr与ppi的关系： ppi与dpr成正比
人工智能的dp
本质上与ios的pt相同
实例(iphone型号) ) ) ) ) )。
设备****iPhone
宽度****Width
高* * * *高
对角线* * * *诊断程序
逻辑分辨率(点) )。
比例因子(DPR )
设备分辨率(像素) ) ) ) ) )。
PPI
3GS
2.4英寸(62.1毫米)。
4.5英寸(115.5毫米)。
3.5英寸
320x480
@1x
320x480
163
4(s ) )。
2.31英寸(58.6毫米)。
4.5英寸(115.2毫米)。
3.5英寸
320x480
@2x
640x960
326
5c
2.33英寸(59.2毫米)。
4.90英寸(124.4毫米)。
4英寸
320x568
@2x
640x1136
326
5(s ) )。
2.31英寸(58.6毫米)。
4.87英寸(123.8毫米)。
4英寸
320x568
@2x
640x1136
326
6
2.64英寸(67.1毫米)。
5.44英寸(138.3毫米)。
4.7英寸
375x667
@2x
750x1334
326
6
3.07英寸(77.9毫米)。
6.23英寸(158.2毫米)。
5.5英寸
414x736
@3x
(1242x2208-) 1080x1920
401
链接