美文网首页
移动端适配方案——1rem=100px公式是怎么计算的?

移动端适配方案——1rem=100px公式是怎么计算的?

作者: 李佳新demo | 来源:发表于2018-08-29 15:20 被阅读0次

    看了很多有关rem的文章,但是还是没有看懂其中的原理以及公式怎么计算的,今天就讲一下我的理解,不知道这样理解合理不合理;

    1.首先要知道rem是怎么用的,它是根据根元素大小来计算1rem到底等于多少px,如果根元素为100px,那么1rem=100px,2rem=200px;
    模拟场景:设计师的设计稿假设为750px;
    假设我们现在有两个设备,一个设备的宽度就是750px,并且我给这个宽度为750px设备的根元素设置为100px,这样1rem就等于100px了,很好计算;
    另一个设备的宽度为变量dWidth;要想与设计稿的效果一样,就要进行等比例缩放,此时我们需要求出另一个设备的根元素font-size值(X)为多少;
    根据这些信息我们可以推导出以下这个公式:
    dWidth/X=designwidth(750)/100=7.5;
    根据小学数学可以得出X得值:
    X=dWidth*100/desingWidth;
    这样就求出X的大小了,在实际开发中,我们根据设计稿的大小除以100就可以的出元素的rem大小;

    相关文章

      网友评论

          本文标题:移动端适配方案——1rem=100px公式是怎么计算的?

          本文链接:https://www.haomeiwen.com/subject/kpxkwftx.html