rem适配方案

http://ailongmiao.com/read/90.html

 

@media only screen and (min-width: 320px) {
    html {
        font-size: 13.65px;
    }
}

@media only screen and (min-width: 360px) {
    html {
        font-size: 15.36px;
    }
}

@media only screen and (min-width: 375px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 390px) {
    html {
        font-size: 16.64px;
    }
}

@media only screen and (min-width: 414px) {
    html {
        font-size: 17.664px;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 27.31px;
    }
}

用Media Query的缺点是什么?它是分段函数,对于宽度在[320, 360)区间内的屏幕,会适用同一套方案。最完美的应该是线性函数,怎么做?很简单,用vw即可。

html {
    font-size: 4.266667vw;
}

 

// 1. 按iPhone 6的视觉稿,基准字号为16px,因此可以设置一个LESS变量。
@px: 16rem;

// 2. 通过LESS内置的除法自动运算。比如用到16px的字号时,写成16/@px即可,最后会计算成1rem。
.example {
    font-size: 16/@px;
    margin: 20/@px 0;
    padding: 20/@px 10/@px;
}

你可能感兴趣的:(react,前端技术)