移动端单位PX.rem.vw换算

为了方便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;

移动端单位PX.rem.vw换算

上一篇:PAT 乙级 1018.锤子剪刀布 C++/Java


下一篇:Computer Networking: a Top-Down Approach (8th ed.) : Notes of Core Lectures (Content)