为了方便rem的计算:
html设置font-size的值:100px;
1rem == 100px
出现问题:100px不会自动适配
找到一个能随着视口改变的单位 vw
下面需要研究的问题: 100px == ? vw
100px == ?vw
根据设计图先确定适配的核心设备。
第一种情况:设计图为640px
设计图640px 考虑dpr 为2(dpr是设备像素与逻辑像素之比)
640px / 2 == 320px
视口的宽 320px
100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px;
第二种情况:设计图为750px;
设计图为750px 考虑dpr为2
750px / 2 == 375px;
视口的宽 375px;
100vw == 375px;
1vw = 3.75px;
?vw == 100px;
26.67vw == 100px;
记住:
如果设计图为640px html的font-size值为31.25vw;
如果设计图为750px html的font-size值为26.67vw;