手机端font-size:31.25vw原理

移动端布局一般使用：

方法一：媒体查询 + rem + 弹性盒子布局

方法二：vw + rem + 弹性盒子布局

这里说一下vw原理：

vw它是根据可视区的宽度来计算的

如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

html {
font-size: 31.25vw; /* 表达式：100*100vw/320 这里是根据320来算的*/
}
如果你们手机是320px的，那么截图出来尺寸是640px;

dpr:像素比

dpr=物理像素（750px） / 逻辑像素(375px，我们去布局写的尺寸) =2

逻辑像素 = 物理像素 / dpr;

dpr的取值：如果的设计图是640px ,750px 的时候 dpr= 2

如果你的设计图为1080的时候，那么dpr=3；

项目中：
(1)如果设计图为750px drp = 2 那么逻辑像素为：375px

给html设置font-size：26.67vw;

下面布局的尺寸：90px（量出来的尺寸） / dpr(2) = 45px(逻辑像素)；

我们rem写多少：45/100= 0.45rem;

(2)如果设计图为640px drp = 2 那么逻辑像素为：320px

给html设置font-size：31.25vw;

下面布局的尺寸：90px（量出来的尺寸） / dpr(2) = 45px(逻辑像素)；

我们rem写多少：45/100= 0.45rem;

(3)如果设计图为1080px drp = 3 那么逻辑像素为：360px

给html设置font-size：27.78vw;

下面布局的尺寸：90px（量出来的尺寸） / dpr(3) = 30px(逻辑像素)；

我们rem写多少：30/100= 0.3rem;

 

项目中还有另一种写法

html{font-size:13.33vw}，
这样是100px/750px=0.13333333... 100px = 13.33vw

那么这样按照设计图来的话，就不用/2了，设计图是100px，那么你也可以写成100px了。

标签：31.25,dpr,vw,设计图,像素,rem,font
来源： https://www.cnblogs.com/snowhite/p/16576978.html