②计算流程:假如:设计图为750px
考虑dpr为 2
ps中量出一个元素为88px
设置css大小的时候 88px / dpr2 == 44px;
又因为 不能固定44px ( 44px固定之后就不能放大或者是缩小 )
所有 44px 转成 rem
因为 html中font-size:100px; 1rem == 100px;
44px == 0.44rem
4)视口单位:
vw : 视口的宽的比例 100vw == 视口宽度的100%
vh : 视口高度的比例 100vh == 视口高度的100%
vmin : 视口的宽和高进行比较 谁小我用谁
vmax : 视口的宽和高进行比较 谁大我用谁
5)根据设计图先确定适配的核心设备。
①第一种情况:设计图为640px
设计图640px 考虑dpr 为2
640px / 2 == 320px
视口的宽 320px
100vw == 320px
1vw == 3.2px
31.25vw == 100px;
②第二种情况:设计图为750px;
设计图为750px 考虑dpr为2
750px / 2 == 375px;
视口的宽 375px;
100vw == 375px;
1vw = 3.75px;
26.67vw == 100px;
注:如果设计图为640px html的font-size值为31.25vw;
如果设计图为750px html的font-size值为26.67vw;