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

2018-08-29  本文已影响0人  李佳新demo

看了很多有关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大小;

上一篇下一篇

猜你喜欢

热点阅读