CSS3-前端小知识移动端单位PX.rem.vw换算

2,387 阅读1分钟
为了方便rem的计算:
    html设置font-size的值:100px;
    1rem == 100px

出现问题:100px不会自动适配 
    找到一个能随着视口改变的单位 vw

下面需要研究的问题: 100px == ? vw  


100px == ?vw

根据设计图先确定适配的核心设备。

第一种情况:设计图为640px
    设计图640px 考虑dpr 为2
    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;

-->