建站百科

文章导读：本文主要阐述了“移动端页面适配基本常识普及”移动端页面适配需要专业的人来操作，因为涉及很多技术领域的知识，虽然不可能快速学会，但是了解这些基本知识有助于你对h5页面适...，本文由跨屏网最后更新于2020-07-27，全文共1851个字，预计阅读时长6分10秒。

对于不同像素宽度的手机，如何做到每一个元素自动缩放？

rem作为一个单位，单位大小由它第一代老祖宗的font-size的大小决定，也就是html标签的font-size。例如我们设置html的font-size为10px，那么1.2rem就是12px，我们在所有需要用到px的地方全都使用rem来代替，这样我们只需要改变html的font-size就可以动态地改变内部所有元素的尺寸了。

实例

我们公司提供了宽度为375pt的设计图（pt后面会解释，暂时理解为px就好）。我以这个版本为基础来写页面。我设置html的font-size为10px，那么设计图上的所有关于pt的标注，我只要除以10，再加上rem作为单位就OK了。然后我只要在初始化页面的函数中加上如下代码，就完成了完美的适配。

let htmlFontSize = 10 * width / 375 + 'px' document.getElementsByTagName('html')[0].style.fontSize = htmlFontSize 

举个栗子：此时手机的宽度变成了414pt，那么根据公式，html的font-size动态地变成了11.04px，页面的其他元素也就跟着放大了。

PS：

• 375pt是iphone6/7/8的宽度。
• 414pt是iphone6/7/8 plus的宽度。

pt 和 px 是什么关系呢？

上面我们说到公司里给出的设计图的单位是pt，而我们写页面的时候使用的单位是px，这两者之间有什么联系呢？我们先了解一下逻辑像素和物理像素，以及一些引伸的概念。

1. 逻辑像素pt（点）html css中的使用的单位像素px实际上指的就是逻辑像素pt，一个逻辑像素可能包含多个物理像素（1个，2个或者3个）
2. 物理像素px这个px并不是我们css中用的px，而是一个一个真实的像素点。是photoshop中用的那个px。
3. dpr（device pixel ratio)DPR = 物理像素 / 逻辑像素，iphone 3GS的dpr为1，iphone 4/4s的dpr为2。其他型号的dpr见下表。
4. ppi（Pixels Per Inch）ppi = 像素数量（pixel） / 显示器的长或宽（inch）

   第一代iphone手机的像素密度是163ppi，但是到了iPhone4的时候像素密度是326ppi (163 * 2)，开发者发现初代的1px(物理像素)和iphone4下的1px(物理像素)显示尺寸(物理尺寸)不相等了，无疑将增加适配的工作量。于是iphone开发者提出了一个pt的概念，即采用初代iphone1个像素点的大小作为基准，记作1pt（point），也就是说1pt在iphone4下的大小=2px的宽高。

   dpr 和 ppi的关系：ppi 和 dpr 成正比

5. 安卓的dp本质上和ios的pt是一样的

   实例（iphone机型）

最后安利以下跨屏网开发的kplatform跨屏平台，网站添加一句话JS文件，即可快速适配移动端。

写在最后，以上就是对于“移动端页面适配基本常识普及”的一些看法，欢迎指正、交流。

网站标题：移动端页面适配基本常识普及
路径分享：http://test.kuaping.com/article/show256.html