px,rem,vw

px， rem ， vw

​ 一般移动端布局， 使用 rem。

​ rem 是相对于根元素标签的字体大小。 默认是 1rem = 16px;

​

这篇文章写的好 总结的好，我把我需要的拿下来。 自己看

https://www.cnblogs.com/SRH151219/p/10407609.html

再来了解一个名词 dpr。

​ dpr(device pixel ratio) 设备像素比 。

​ 简单的理解 ： 就是 F12 控制台的手机模型， 和真正的像素 对应关系。

​ 举个例子：经典iphone6。 控制台上 x 是375。 一般设计图给的是 750。

​ 这个时候 dpr 就是 2 。 750/375。

​

​ 规律： 640px 750px dpr 是2

​ 1080px dpr是3

移动端 使用单位 rem。 因为是照着 设计图 写的。 为什么使用rem方便。 一般 1rem = 100px ; 1rem = 200px。

​ 假设 现在的设计图 是 750px。 咱们反推一下吧。

​ 我们根元素 设置

html {
		font-size: 26.67vw;
}

为什么要这么设置呢？

​ vw 是 视口的宽度。 100vw 是整个视口的宽度。

​ 我们的设计图 是 750px。 那么 26.67vw 就是 约等于 200px； 也就是 1rem = 200px;

​

​ 如果用 逻辑像素的话。 dpr 是 2 。 逻辑像素 是 350px。 那么 1rem 就是 100 逻辑像素。

这样就明白了。 为了让 rem 和 设计图 好对应。 1rem 为 200px。

微信 rpx

rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。