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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一...
    keenjaan阅读 26,922评论 9 86
  • 前言:正好最近有时间,给移动端适配这里做一个整理,全面并且深入地重新去理解这些代码的含义,不再只是代码的搬运工,不...
    潘千千阅读 2,453评论 0 3
  • 不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技...
    是ADI呀阅读 3,163评论 0 10
  • 应用场景:培训第一天的破冰游戏 项目性质:团队合作+挑战 使用道具:报纸 活动目的:让队员自然地进行身体接触,学员...
    艾瑞克_李阅读 2,357评论 0 0
  • 它是森林深处湖泊中的一株莲,开开落落,历了千百年,经了风云变幻物换星移,渐渐有了灵性。 既有了灵性,便生烦恼,这一...
    元程阅读 542评论 0 3